JavaScript: как заменить код внутри элемента без innerHTML

Question

Я хочу заменить содержимое внутри элемента в JavaScript, но я не могу использовать inner HTML и jQuery.

Например:

<div id="MyID">
<b>Hi,</b> how are you?<br/>
I am fine.
</div>

Я хочу заменить все между <div id="MyID"> и </div>.

Как через внутренний HTML, который я, к сожалению, не могу использовать:

document.getElementById('MyID').innerHTML = document.getElementById('MyID').innerHTML.replace(/you/, '<a href="">you</a>');

Что будет быть:

<div id="MyID">
<b>Hi,</b> how are <a href="">you</a>?<br/>
I am fine.
</div>

Как это сделать?

Я пробовал такие вещи, как appendChild и removeChild , но я все еще не могу понять это.

Answer 1

Используйте remove (), чтобы очистить существующее содержимое, а затем insertAdjacent HTML (), чтобы ввести новое содержимое. Вот пример вашего кода в качестве примера.

<div id="MyID">
<span id="MyID2">
<b>Hi,</b> how are you?<br/>
I am fine.
</span>
</div>

<button onclick="myFunction()">Insert a paragraph</button>

<script>
function myFunction() {
var a = document.getElementById("MyID2");
a.remove();
var b = document.getElementById("MyID");
b.insertAdjacentHTML('afterbegin', '<b>Hi,</b> how are <a href="">you</a>?<br/>I am fine.');
}
</script>

Answer 2

Для appendChild вы должны добавить объект dom