在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/zh-CN/docs/Web/API/Element/insertAdjacentHTML

“之前”

将新元素插入到元素的最后一个子元素之后。因此使其成为新的最后一个孩子。

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

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

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