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

修改为了使其更加动态，您可以编写一个类似下面的函数来循环遍历属性及其值的对象，并将它们应用于目标元素。

看起来你想要实现的是非常难以使用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);

Answer 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文档，因为它们非常广泛地解释了鱼尾（https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute）。

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

替换outerHTML而不分离元素

2 个答案: