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

Posted 2023-05-07

【中文标题】JavaScript：如何在没有 innerHTML 的情况下替换元素内的代码

【英文标题】：JavaScript: How to replace code within element without innerHTML

【发布时间】：2020-06-24 18:21:25

【问题描述】：

我想在 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 之类的方法，但仍然无法弄清楚。

【问题讨论】：

我不知道为什么不使用 innerHTML 和 jQuery 会受到限制，但这足以告诉我你应该获得一个 SPA 框架。

【参考方案1】：

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

【参考方案2】：

使用 remove() 清除现有内容，然后使用 insertAdjacentHTML() 输入新内容。这是您的代码示例作为示例。

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