javascript - 替换outerHTML而不分离元素

Question

有一个 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分离；丢失事件等)。

Answer 1

你可能应该这样做:

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

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

编辑:为了使其更加动态，您可以编写一个如下所示的函数来循环属性及其值的对象，并将它们应用到目标元素。

看起来你想要用普通的 JavaScript 实现的目标相当困难，我会考虑使用某种库，可能会使用react，因为你似乎希望根据状态进行更改。

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