在使用带有本机 javascript 的appendChild 后，如何更新对 HTML 元素的引用

Question

我正在使用本机 javascript 将一个元素附加到我的 DOM，该元素在 X 秒后消失。

为了附加该元素，我创建了一个带有函数的文档片段，createHTML然后将该元素附加到我的容器元素中。

var elementHTML = '<div>Test element appended</div>';
    elementHTML = createHTML(elementHTML);      
document.getElementById('append-container').appendChild(elementHTML);

然后我设置一个超时，在 x 秒后从 DOM 中删除该元素

setTimeout(function() {
    elementHTML.parentNode.removeChild(elementHTML);
}, 2000, elementHTML); 

现在这不起作用，因为当您使用appendChild时，元素会被移动并且对元素的引用会丢失。我正在寻找一种方法来更新对elementHTML我刚刚附加到 DOM 的元素的引用。

基本上我正在寻找 jQuery 参考功能而不使用 jQuery。

我可以使用随机生成的 ID 来定位元素，或者添加一个类并循环遍历具有该类的所有元素并定位最后一个元素，但这些方法感觉很难看。

我想知道当您向 DOM 附加某些内容以定位刚刚附加的内容时是否存在某种回调，或者我的逻辑是否完全错误。

小提琴

Answer 1

问题是 aDocumentFragment会将片段的内容移动到 DOM 中的新位置，但片段本身仍将是片段，不会直接附加到任何内容：

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

如果给定的子节点是 DocumentFragment，则 DocumentFragment 的全部内容都会移至指定父节点的子节点列表中。

毕竟，否则，如果 HTML 字符串是

<div>Test element appended</div><div>Test element 2 appended</div>

附件可以documentFragment指什么？它不能只是其中之一<div>，也不能是父元素（它已经在 DOM 中，并且不是用片段创建的）。

所以，一旦documentFragment添加了a，就无法一次性将其删除。

如果保证片段仅包含一个元素（如您的示例中所示），则选择该元素并将其附加（然后您可以正确引用其parentNode）。

<div>Test element appended</div><div>Test element 2 appended</div>

// though using a documentFragment in the first place is a bit odd
// if you're not going to append it

var createHTML = function(htmlStr) {
  var frag = document.createDocumentFragment(),
    temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
    frag.appendChild(temp.firstChild);
  }
  return frag;
}

var appendItems = function() {
  const elementHTML = '<div>Test element appended</div>';
  const fragment = createHTML(elementHTML);
  const fragmentElm = fragment.children[0];
  document.getElementById('append-container').appendChild(fragmentElm);
  setTimeout(function() {
    fragmentElm.parentNode.removeChild(fragmentElm);
  }, 2000, elementHTML);
}

document.getElementById('test-append').addEventListener('click', appendItems);

另一种选择是迭代所有附加节点及其.remove()：

<div id="append-container">

</div>

<button id="test-append">
  Test
</button>

var createHTML = function(htmlStr) {
  var frag = document.createDocumentFragment(),
    temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
    frag.appendChild(temp.firstChild);
  }
  return frag;
}

var appendItems = function() {
  const elementHTML = '<div>Test element appended</div><div>Test element 2 appended</div>';
  const fragment = createHTML(elementHTML);
  const fragmentElms = [...fragment.children];
  const container = document.getElementById('append-container');
  fragmentElms.forEach((elm) => {
    container.appendChild(elm);
  });
  setTimeout(function() {
    fragmentElms.forEach((elm) => {
      elm.remove();
    });
  }, 2000, elementHTML);
}

document.getElementById('test-append').addEventListener('click', appendItems);