gpt4 book ai didi

javascript - 选定节点与其导入节点之间的差异

转载 作者:行者123 更新时间:2023-12-03 11:52:50 24 4
gpt4 key购买 nike

在下面的代码中,我在每一行都注释了 A 和 B。
A和B有什么不同?推荐哪一个?

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
</head>

<template id="templatetest">
<div>test</div>
</template>

<body></body>

<script type="text/javascript">
var t = document.querySelector('#templatetest');

var n = document.importNode(t.content, true);
document.body.appendChild(n); //A

document.body.appendChild(t.content); //B
</script>

</html>

还有一个问题..
上面的代码呈现了两个“测试”。但是,当我像下面的代码一样切换 A 和 B 的位置时,仅以某种方式呈现一个“测试”。
我想知道为什么会发生这种情况。

<script type="text/javascript">
var t = document.querySelector('#templatetest');

document.body.appendChild(t.content); //B

var n = document.importNode(t.content, true);
document.body.appendChild(n); //A
</script>

最佳答案

要点是 importNode 创建节点的副本并返回它,然后您可以使用 appendChild 将其添加到新的父级中。它旨在当您从另一个文档获取节点并将其插入到您的文档中时使用(例如,当您在不同的 XML 文件之间移动节点时),此函数将修复诸如 OwnerDocument 属性和其他内部问题之类的问题相信。

appendChild 只是将节点附加到其他节点,如果您要附加的节点已经是任何其他节点的子节点,它首先会将其从那里删除并将其移动到新的父节点。

在第一个示例中:

  • A - 创建 t.content 的副本 (n - importNode) 并将其附加到正文;
  • B - 您只需将 t.content 附加到正文,从而将其从原始父级中删除

你的第二个例子

  • B - 您将 #templatetest 的内容移至正文
  • A - #templatetest 现在是空的,它没有更多内容,因此您不再需要在正文中复制和附加任何内容

关于javascript - 选定节点与其导入节点之间的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25743324/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com