javascript - `insertAdjacentHTML` 和 `createElement`

Question

如何保留对新创建的元素 (createElement()) 的引用，该元素是我在 DOM 中的现有元素 (insertAdjacentHTML()) 之后插入的？

在此示例中，如果我在 insertAdjacentHTML() 之后使用 elNew/elNewInner，您可以看到颜色没有改变:

var elOrig = document.getElementById('insertAfter');

// Create new element
var elNew = document.createElement('div'),
  elNewInner = document.createElement('div');

elNewInner.textContent = 'I\'m a new element, but I\'m not red';

elNew.appendChild(elNewInner);

elOrig.insertAdjacentHTML('afterend', elNew.outerHTML);

// This doesn't change the color in the DOM
elNewInner.style.color = 'red';

<div id="insertAfter">Insert new element after me</div>

在我使用 insertAdjacentHTML 之后是否有任何方法可以保留对元素的引用，或者在 JavaScript 中是否有其他方法可以实现相同的目的？

Answer 1

比使用 .insertAdjacentHTML 更好的方法与 .outerHTML就像那样使用 .insertBefore来自 .parentNode的 elOrig .

var elOrig = document.getElementById('insertAfter');

// Create new element
var elNew = document.createElement('div'),
  elNewInner = document.createElement('div');

elNewInner.textContent = 'I\'m a new element, but I\'m not red';

elNew.appendChild(elNewInner);
elOrig.parentNode.insertBefore(elNew, elOrig.nextSibling)

// This doesn't change the color in the DOM
elNewInner.style.color = 'red';

<div id="insertAfter">Insert new element after me</div>

这插入 elNew在 .nextSibling 之前的 elOrig , 这实际上与把它放在 "afterend" 上是一样的。使用 insertAdjacentHTML .

按照您原来的方式，您采用新元素，将其转换为 HTML，然后从该 HTML 生成新元素，这肯定会变慢，并且最终会附加一个副本。