替换outerHTML而不分离元素答案

【问题标题】：Replace outerHTML without detaching element替换outerHTML而不分离元素
【发布时间】：2017-01-21 07:04:37
【问题描述】：

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

【问题讨论】：

你只是想改变属性updated=true和foo="bar"，以及段落的文本吗？
接受的答案需要适应任意数量的属性，而不仅仅是更新和 foo。
提交的 2 个答案，mine 和 waterfoul's，应考虑任意数量的属性。
它需要与模板和现有的 DOM 元素无关；一个可重用的函数，它可以采用任何模板字符串和任何现有的 DOM 节点并将所有属性从所述模板复制到现有的 DOM 节点。所以即：解析模板中的属性，然后循环它们以应用于 DOM 节点。
您将编写一个自定义函数来处理它。不幸的是，没有现成的解决方案。用例是什么？我将使用您可以尝试的示例解决方案来更新我的答案。

标签： javascript html outerhtml

【解决方案1】：

你可能应该这样做：

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

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

编辑： 为了使其更具动态性，您可以编写如下所示的函数来遍历属性对象及其值并将它们应用于目标元素。

看起来您想要实现的目标对于 vanilla 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);

【讨论】：

看起来不错，谢谢，这可以解决问题！（以及对 innerHTML 的快速更新）
没错，这些变化是基于新的状态。然而，这样做的目标实际上是不使用 React 或任何框架 - 只执行差异/属性和内部文本的较低级别的东西将是理想的。如果它不仅可以容纳目标 DOM 的“外部元素”而且还可以容纳子元素（即，任何子元素也不会被分离），则加分。

【解决方案2】：

基本上，您将希望对元素进行变异以单独进行每个更改。要进行您显示的更改，您需要执行以下操作

document.getElementById("myNode").setAttribute('updated', true);
document.getElementById("myNode").setAttribute('foo', 'bar');
document.getElementById("myNode").textContent = 'hello world!!!';

如果您想在任何元素上使用它，您需要更改传递给 getElementById 的参数以匹配您元素的 ID。

使用 setAttribute 将适用于大多数属性，并以 setAttribute(attributeName, attributeValue) 格式工作。有关 setAttribute 如何工作的详细信息，我建议您查看 mdn 文档，因为它们非常广泛地解释了 caviats (https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)。

要设置元素的内部，如果要添加 html，则需要设置 innerHtml 属性；如果仅分配文本，则需要设置 textContent 属性（有用，因为您不需要转义 html）

【讨论】：

谢谢，为了澄清，答案需要对模板和现有的 DOM 元素（除了 id）都是不可知的。假设最初我们不知道模板的属性数量或属性名称/值，也不是 innerText。
完成了，我采用了浏览器 api 解释方法，而不是提供一个功能来完成 api 的功能