4

我创建了一个通用元素

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

之后，使用 outerHTML 更改元素

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

元素正确显示。然而，变量本身的“元素”并没有以任何方式反映变化。检索该特定元素的唯一方法似乎是执行类似...

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

看起来很丑。有没有更好的方法和/或我错过了什么？

4

1 回答 1

4

考虑下面的片段：

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。如文档中所述：

此外，虽然元素将在文档中被替换，但设置了 outerHTML 属性的变量仍将保留对原始元素的引用。

因此，最简单的方法是document.getElementById()在设置后实际使用id来获取创建的新元素，或者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);

于 2017-01-31T08:53:59.077 回答