返回由 outerHTML 更改的元素
returning element altered by outerHTML
我通过
创建了一个通用元素
var element = document.createElement(null);
document.body.appendChild(element);
之后,使用 outerHTML
更改元素
element.outerHTML = "<div> hello there </div>";
元素显示正确。但是,变量本身 "element" 不以任何方式反映更改。检索该特定元素的唯一方法似乎是做类似...
element.outerHTML = "<div id='hi'> hello there </div>";
element = document.getElementById("hi");
长得丑。有没有更好的方法and/or我是不是漏掉了什么?
考虑下面的代码片段:
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.
因此,最简单的方法是在设置 said 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);
我通过
创建了一个通用元素var element = document.createElement(null);
document.body.appendChild(element);
之后,使用 outerHTML
更改元素element.outerHTML = "<div> hello there </div>";
元素显示正确。但是,变量本身 "element" 不以任何方式反映更改。检索该特定元素的唯一方法似乎是做类似...
element.outerHTML = "<div id='hi'> hello there </div>";
element = document.getElementById("hi");
长得丑。有没有更好的方法and/or我是不是漏掉了什么?
考虑下面的代码片段:
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.
因此,最简单的方法是在设置 said 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);