`insertAdjacentHTML`和`createElement`

Question

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

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

＆＃13;

＆＃13;

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';

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在使用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置于IFERROR实际上相同。

按照您原来的方式，您正在使用新元素，将其转换为HTML，然后从该HTML中创建新元素，这肯定会变慢，并且最终会附加副本。