Question

在下面的代码中，我在每行注释了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>

还有一个问题..
上面的代码呈现了两个＆＃34; test＆＃34; s。但是当我像下面的代码那样切换A和B的位置时，只有一个＆＃34;测试＆＃34;以某种方式呈现。
我想知道为什么会这样。

<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>

Answer 1

点为importNode创建节点的副本并将其返回，然后您可以使用appendChild将其添加到新父节点中。当您从另一个文档中获取节点并将其插入到您的文档中时（例如，当您在不同的XML文件之间移动节点时），它将用于修复诸如ownerDocument属性和其他内部事物之类的内容。信。

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

在你的第一个例子中：

A - 您创建了t.content（n - importNode）的副本并将其附加到正文中;
B - 您只需将t.content附加到body，从而将其从原始父级

你的第二个例子

B - 您将#templatetest的内容移至正文
A - #templatetest现在为空，它没有更多内容，因此您无需复制任何内容并将其追加到您的身体中

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

1 个答案: