`insertAdjacentHTML`和`createElement`

问题描述

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

在此示例中，如果我使用 insertAdjacentHTML（）之后的> elNew / elNewInner ：

  var elOrig = document.getElementById（'insertAfter'）; //创建新元素var elNew = document.createElement（'div'），elNewInner = document.createElement（'div' ）; elNewInner.textContent ='我是一个新元素，但我不是红色'; elNew.appendChild（elNewInner）; elOrig.insertAdjacentHTML（'afterend'，elNew.outerHTML）; //这不是' t更改DOMelNewInner.style.color ='red'中的颜色；  

 < div id = insertAft er>在我之后插入新元素  

在我使用 insertAdjacentHTML 之后，有什么方法可以保留对元素的引用？或者在JavaScript中还有其他方法可以实现对元素的引用吗？

解决方案

比使用 .insertAdjacentHTML 和 .outerHTML 更好的方法这样的话是使用 elOrig .parentNode 中的 .insertBefore $ c>。

  var elOrig = document.getElementById（'insertAfter'）; //创建新元素var elNew = document.createElement（'div '），elNewInner = document.createElement（'div'）; elNewInner.textContent ='我是一个新元素，但我不是红色'; elNew.appendChild（elNewInner）; elOrig.parentNode.insertBefore（ elNew，elOrig.nextSibling）//这不会更改颜色DOMelNewInner.style.color ='red';  

 < ; div id = insertAfter>在我之后插入新元素< / div>  

这将在 elOrig .nextSibling 之前插入 elNew 。 $ c>，实际上与使用 insertAdjacentHTML 放入后端 相同。

使用您原来的方式，您将采用新元素，将其转换为HTML，然后从该HTML中创建新元素，这肯定会变慢，并最终会添加副本。 p>

How can I keep a reference to a newly created element (createElement()), that I inserted after an existing element in the DOM (insertAdjacentHTML())?

In this example, you can see that the color doesn't change, if I use elNew/elNewInner after 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>

Is there any way to keep an reference to an element after I use insertAdjacentHTML or are there other ways in JavaScript to achieve the same?

解决方案

Better approach than using .insertAdjacentHTML with .outerHTML like that would be to use .insertBefore from the .parentNode of 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>

This inserts elNew before the .nextSibling of elOrig, which is effectively the same as putting it "afterend" using insertAdjacentHTML.

With your original way, you were taking the new elements, converting it to HTML then making new elements from that HTML, which is certainly going to be slower, and is ultimately appending a copy.

这篇关于`insertAdjacentHTML`和`createElement`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！