在insertAdjacentHTML之后选择相同的新元素

Question

使用原生Javascript。通过insertAdjacentHTML添加新元素后，我想选择该元素本身（<div id="two">two</div>）。如何在不必搜索DOM的情况下获得它？

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one<div id="two">two</div></div>

Answer 1

根据文档

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

＆＃39; beforeend＆＃39;

插入新元素就在元素内部，在其最后一个子元素之后。因此，使它成为新的最后一个孩子。

你可以在d1元素上使用lastChild。

＆＃13;

＆＃13;

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
console.log(d1.lastChild)

＆＃13;

<div id="one">one</div>

＆＃13;

＆＃13;

＆＃13;