javascript - `insertAdjacentHTML`和`createElement`

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

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

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中还有其他方法可以实现相同的目的？

最佳答案

比将.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中创建新元素，这肯定会变慢，并最终附加了副本。