如何记录文档范围的更改？

发布于 2025-01-25 09:49:45 字数 979 浏览 2 评论 0原文

当我在浏览器中运行以下代码-3

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);
});

个未排序的列表都有每个列表项目元素的记录 -

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>

原文

When I run the following code in the browser -

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 unordered lists are logged each with 3 list item elements -

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>

How can I log the progression as elements are added to the list. For example -

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

药祭#氼 2025-02-01 09:49:45

您可以通过记录ul元素的HTML内容，而不是其参考来做到这一点，为此，您可以使用exouthhtml：

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);
});

You can do this by logging the HTML content of ul element, not its reference, for this you can use 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);
});

回复收藏 0 原文

~没有更多了~