如何记录对 DocumentFragment 的更改？

Question

当我在浏览器中运行下面的代码-

const frag = new DocumentFragment();
const ul = document.createElement('ul');
frag.appendChild(ul);
Object.entries(['a', 'b', 'c']).forEach(([key, value]) => {
  const li = document.createElement('li');
  li.textContent = value;
  ul.appendChild(li);
  console.log(key, frag.firstChild);
});

记录了 3 个无序列表，每个列表包含 3 个列表项元素 -

0
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
1
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
2
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

如何记录元素添加到列表中的进度。例如-

0
<ul>
  <li>a</li>
</ul>
1
<ul>
  <li>a</li>
  <li>b</li>
</ul>
2
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Answer 1

您可以通过记录 ul 元素的 HTML 内容而不是它的引用来做到这一点，为此您可以使用 outerHTML:

const frag = new DocumentFragment();
const ul = document.createElement('ul');
frag.appendChild(ul);
Object.entries(['a', 'b', 'c']).forEach(([key, value]) => {
  const li = document.createElement('li');
  li.textContent = value;
  ul.appendChild(li);
  console.log(key, frag.firstChild.outerHTML);
});

如何记录对 DocumentFragment 的更改？

How to log changes to DocumentFragment?

javascript

documentfragment