用 innerHTML 替换节点

Question

使用JavaScript，我想要删除一个特定的DOM节点，并用innerHTML替换它。例如，我想要改变：

<div>
...
   <div id="t1">
        this is <b> the text </b> I want to remain.
   </div>
...
</div>

To

<div>
...
    this is <b> the text </b> I want to remain.
...
</div>

- Mostafa Mahdieh

Answer 1

试试这个：

var oldElem = document.getElementById('t1');
oldElem.innerHTML = 'this is <b> the text </b> I want to remain.';
var parentElem = oldElem.parentNode;
var innerElem;

while (innerElem = oldElem.firstChild)
{
  // insert all our children before ourselves.
  parentElem.insertBefore(innerElem, oldElem);
}
parentElem.removeChild(oldElem);

这里有一个演示链接。

这实际上与jQuery中的.replaceWith()相同：

$("#t1").replaceWith('this is <b> the text </b> I want to remain.');

- gnarf

Answer 2

var t1 = document.getElementById("t1"); t1.outerHTML = "这是我想要保留的<b>文本</b>。";

http://youmightnotneedjquery.com/#replace_from_html

- Павел П

Answer 3

如果你正在使用jQuery，你可以尝试

var inner = j$("#t1").html()
$('#t1').replaceWith(inner);

- Arun P Johny

---

如果我已经通过标签名称检索到了节点，例如：var celem=document.getElementsByTagName("span");我想对celem中的所有节点元素执行此操作。 - Mostafa Mahdieh

Answer 4

这个可以工作：

var t1 = document.getElementById("t1");
t1.parentNode.innerHTML = t1.innerHTML;

编辑：

请注意，如果t1的父元素还有其他子元素，则上述代码也会将它们全部删除。以下是修复此问题的代码：

var t1 = document.getElementById("t1");
var children = t1.childNodes;
for (var i = 0; i < children.length; i++) {
    t1.parentNode.insertBefore(children[i].cloneNode(true), t1);
}
t1.parentNode.removeChild(t1);

- Siddhartha Reddy

---

这种解决方案的弱点在于t1的父节点（即您示例中的t0）可能还有其他各种节点。此解决方案会删除这些节点。 - Mostafa Mahdieh

为什么在将节点移动到其父级之前要克隆它？为什么不直接移动它？反正您最终会删除所有原始节点... - gnarf

Answer 5

实际上很简单：

let span = document.getElementById('id');
span.outerHTML = span.innerHTML;

- Nicolas Manzini

Answer 6

我刚刚修改了HTML，就像这样。

<div>
<div id="t0">
<div id="t1">
        this is <b> the text </b> I want to remain.
</div>
</div>
</div>

然后你可以这样做

document.getElementById("t0").innerHTML = "this is <b> the text </b> I want to remain.";

希望它能正常工作

- Anuraj

---

这种解决方案的弱点是，t1的父节点（即您示例中的t0）可能有其他多个节点。该解决方案会删除那些节点。 - Mostafa Mahdieh

Answer 7

如果可能的话，您可能想考虑使用jquery。这将使您的生活变得轻松得多。

一旦您拥有了jQuery，您可以轻松地通过以下方式完成

$("#t1").html("this is <b> the text </b> I want to remain.");

如果您觉得学习编程很麻烦，您可以先从学习jQuery选择器开始。

你会惊讶自己为什么过去没有使用它 :)

如果这不是您想要的内容，请见谅。

~jQuery爱好者

更新：

展示放在HTML文本中的代码。

- melaos

---

我应该用什么替换“在此处输入您的值”？必须是“这是<b>要保留的文本</b>。”吗？ - Mostafa Mahdieh

是的，请检查上面更新的代码。因为HTML需要HTML代码。 - melaos

Answer 8

这与其他答案类似，但更加实用。

go.onclick = () => {
  [...t1.childNodes].forEach(e => {
    t1.parentElement.insertBefore(e, t1);
  });
  t1.remove();
  go.disabled = true;
}

#t1 {
  color: red;
}

<div>
   <div>BEFORE</div>
   <div id="t1">
        this is <b> the text </b> I want to remain.
   </div>
   <div>AFTER</div>
   <button id="go">GO</button>
</div>

- Titus