javascript - 替换外层HTML而不分离元素

有一个DOM节点（即<p id="myNode">hello world</p>）和一个包含新替换项的原始字符串。

有效实现...的好技术是什么？

var rawReplacement = `<p id="myNode" updated=true foo="bar">hello world!!!</p>`
document.getElementById("myNode").outerHTML = rawReplacement

但是实际上并没有使用outerHTML（它将原始元素与DOM分离；丢失事件等）。

最佳答案

您可能应该执行以下操作：

var el = document.getElementById("myNode");

el.setAttribute('updated', true);
el.setAttribute('foo', 'bar');
el.textContent = 'new text';

编辑：
为了使这种方法更具动态性，您可以编写下面的函数，以遍历属性及其值的对象并将其应用于目标元素。

似乎您要使用香草javascript来实现的目标非常困难，我会考虑使用某种类的库，可能会做出反应，因为您似乎希望基于状态进行更改。

// Function
function updateElement (element, attributes) {
  for (attr in attributes) {
    element.setAttribute(attr, attributes[attr]);
  }
}


// Use
var myNode = document.getElementById("myNode");
var attributes = {
    updated: true,
    foo: bar
};

updateElement(myNode, attributes);

关于javascript - 替换外层HTML而不分离元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39474092/