javascript - 返回由 outerHTML 更改的元素

Question

我创建了一个通用元素

var element = document.createElement(null);
document.body.appendChild(element);

之后，使用 outerHTML 更改元素

element.outerHTML = "<div> hello there </div>";

元素显示正确。但是，变量本身“元素”并不以任何方式反射(reflect)更改。检索该特定元素的唯一方法似乎是做类似...

element.outerHTML = "<div id='hi'> hello there </div>";
element = document.getElementById("hi");

看起来很丑。有没有更好的方法和/或我是否遗漏了什么？

Answer 1

考虑下面的片段:

var element = document.createElement(null);
console.log(element);
document.body.appendChild(element);
console.log(element);
element.outerHTML = "<div id='hi'> hello there </div>";
console.log(element);
element = document.getElementById("hi");
console.log(element);

您会注意到，在使用 outerHTML 之后，引用是对原始元素的引用。这如 documentation 中所述:

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element.

因此，最简单的方法是在设置所述 id 之后实际使用 document.getElementById() 来获取创建的新元素或使用 document。 createElement() 像这样创建一个不太通用的对象并操作它的 innerHTML():

var element = document.createElement('div');
console.log(element);
element.innerHTML = ' hello there ';
document.body.appendChild(element);
console.log(element);

如您所见，在上面的代码片段中，element 在更改其内容后是相同的。

更新:

使用一些创造性的技巧，您可以使用 innerHTML 添加您想要的东西到您创建的通用元素，然后获取它的 firstChild 并替换 element，然后最后将其添加到您的文档并保持选中状态。下面的示例向您展示了如何执行此操作:

var element = document.createElement(null);
element.innerHTML = '<div> hello there </div>';
element = element.firstChild;
document.body.appendChild(element);
console.log(element);