Как в JavaScript подменить элемент?

Question

[Алексей]

Есть такой код на странице:

<div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	         <li role="presentation" class="store-button active" ng-if="App.storeServers.length <= 1 || App.settings.showServersInShop" ui-sref-active="active">
	                   <a role="button" ui-sref="app.store.store" href="#/app/store/">Магазин</a>
	         </li>
	         <li role="presentation" class="support-button" ui-sref-active="active" ng-if="App.settings.support">
		           <a role="button" ui-sref="app.store.support" href="#/app/support">Техподдержка </a>
	         </li>
	</ul>
	<ul class="nav navbar-nav navbar-right user-logged" ng-if="App.user.logged">
		<li role="presentation" class="balance-button">
			<a role="button" ng-click="App.openModal('#donation_modal'); App.donateSum = 100;" translate="navbar.balance" translate-values="{amount: App.user.balance, currency: 'RUB'}">Баланс: 986 RUB</a>
		</li>
	</ul>
</div>

Как заменить вот этот код:

<a role="button" ng-click="App.openModal('#donation_modal'); App.donateSum = 100;" translate="navbar.balance" translate-values="{amount: App.user.balance, currency: 'RUB'}">Баланс: 986 RUB</a>

Вот этим "С помощью javaScript.":

<a class="nav-link" href="javascript:;" onclick="OpenOplata()">Баланс: 986 RUB</a>

Comments

[Anonymous Penguin]

Александр, тостер отобразил разметку буквально, ведь автор не поместил ее в тег code. Сейчас исправил

[Алексей]

Александр, Не выходит подмену сделать "role="button" ng-click="App.openModal('#donation_modal'); App.donateSum = 100;" translate="navbar.balance" translate-values="{amount: App.user.balance, currency: 'RUB'}"" , на код который ниже. При парсинге выдает или null или пустое значение.

[Anonymous Penguin]

Александр, ну вот, всё появилось

Автор просит заменить тег, но оставить его содержимое

[Anonymous Penguin]

Александр, а я тут и помогаю, и решаю задачки. Это часть моего обучения, ведь пока человек помогает другим, он и сам учится

Answer 1

[Anonymous Penguin]

https://learn.javascript.ru/basic-dom-node-propert...

let a = querySelector(`a[role="button"]`);
a.outerHTML = `<a class="nav-link" href="javascript:;" onclick="OpenOplata()">${ a.innerHTML }</a>`;

Comments

[Алексей]

Консоль выдает ошибку :
element not found TypeError: Cannot read properties of null (reading 'innerHTML')

[Anonymous Penguin]

Алексей, у переменной a вместо querySelector используй свою выборку. Я написал свою для наглядности. Разве до этого нельзя было додуматься? Canot read properties of null - нельзя прочитать свойства у пустоты. Это значит, что querySelector не нашел элементов и вернул null. Дай своей ссылке id или class и выбери ее через js

[Алексей]

Я совсем недавно изучаю js по этому многих моментов не знаю, мне дали код я пытаюсь сделать то что запросили

[Anonymous Penguin]

В общем, дай первоначальной ссылке id:

<a id="linkToReplace1" role="button" ng-click="App.openModal('#donation_modal'); App.donateSum = 100;" translate="navbar.balance" translate-values="{amount: App.user.balance, currency: 'RUB'}">Баланс: 986 RUB</a>

И вместо let a = querySelector(...) поставь:
let a = document.getElementById('linkToReplace1');

[Kvason]

Алексей, ну так значит надо учить, а не задавать дефолтные вопросы на тостерах. Ты даже не удосужился погуглить зачем квериселектор нужен и что значит эта ошибка

[Алексей]

Anonymous Penguin, Все оказалось банально просто, проблема была не в том что я что то не то делаю, а в том что контент не успевал прогрузится на страницу, так-как скрипт JS выполнялся раньше этого, поставил таймаут и все стало на свои места.

[Anonymous Penguin]

Алексей, А, ну да. Это одна из самых распространенных ошибок новичков, когда элементы ищутся до прогрузки контента. Ты уже исправил, но вот тебе пара методов решения этой проблемы, на заметку:
В теге подключения скрипта добавить атрибут defer или поместить код в window.onload = function () {...} или просто разместить скрипт после контента