JavaScript:如何在没有innerHTML的情况下替换元素中的代码

Question

我想在JavaScript中替换元素中的内容，但我不能使用innerHTML和jQuery。

例如：

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

我想替换<div id="MyID">和</div>之间的所有内容。

就像通过innerHTML，我很遗憾不能使用：

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

对于appendChild，您应该附加一个dom实体

Answer 2

使用remove((清除现有内容，然后插入AdjacentHTML((输入新内容。下面是您的代码示例。

<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>