用innerhtml替换节点

Question

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

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

要

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

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

有一个演示here。

这与jQuery中的.replaceWith()实际上是一样的：

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

Answer 2

如果您使用jQuery，可以尝试

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

Answer 3

这有效：

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

Answer 4

我刚刚修改了这样的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.";

希望它有效

Answer 5

如果可能，您可能需要考虑使用jquery。 它会让你的生活更轻松。

一旦你有jquery，你可以通过

轻松完成

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

如果你觉得学习很麻烦，你总是可以从学习jquery选择器开始。 你不会知道为什么你没有一直使用它:)）

对不起，如果这不是你想要的......

~jquery addict

更新

显示要放入的HTML文本。

Answer 6

实际上很容易：

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

Answer 7

这与其他答案类似，但功能更多。

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>