Question

我通过

创建一个通用元素

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

之后，使用outerHTML

更改元素

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

元素正确显示。但是，变量本身＆＃34;元素＆＃34;不以任何方式反映变更。检索该特定元素的唯一方法似乎是做... ...

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

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

Answer 1

考虑下面的代码段：

＆＃13;

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

＆＃13;

您会注意到，在使用outerHTML之后，引用是对原始元素的引用。这与documentation：

中所述的相同

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

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

＆＃13;

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

＆＃13;

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

<强>更新

使用一些创意技巧，您可以使用innerHTML将所需内容添加到您创建的通用元素中，然后抓取其firstChild并替换element，最后将其添加到您的记录并保持选中状态。以下示例显示了如何执行此操作：

＆＃13;

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

＆＃13;

返回由outerHTML更改的元素

1 个答案: