我想要一个按钮来切换文档中的元素。我不想使用 class display: none if/else 语句。相反，如果它不存在，我想 appendChild，如果它存在，那么我想 removeChild。有一个我想要实现的想法，但我在那里遇到了一些问题。该元素已显示，但在下次单击时，它不会被删除，而是会得到它的多个副本。（我想是这样）。请不要使用jQuery。仅限普通 JavaScript。不知道它是否重要，但是my-elementHTML <template>。
<body>
<button id="my-button">Toggle</button>
<template id="my-element">
<div>
Some content
</div>
</template>
<script>
let element = document.getElementById('my-element');
let content = element.content;
function toggle () {
if (document.body.contains(content)) {
document.body.removeChild(content);
} else {
document.body.appendChild(content);
}
}
let button = document.getElementById('my-button');
button.addEventListener('click', toggle, false);
</script>
</body>
您应该了解它template存在于加载的 DOM 之外，因此无论您在代码中物理地将它定位到何处，以后都不会产生任何区别。另外，请理解，当您想访问 a 的内容时template，您使用.content，但是在将该内容注入 DOM 之后，它就template.content不再是了，它是 DOM 的一部分。
因此，您无法在文档中搜索模板，.content因为插入后，它不会是文档中的模板内容，而是实际的 DOM 内容。您需要某种方法来识别它，而类是最简单的方法。
此外，模板文档说您将模板内容带入文档中document.importNode，而您没有使用。
接下来，永远记住，.removeChild正如它的名字所暗示的那样，它删除了子元素。document.body.removeChild()因此只能删除body元素的子元素，所以你需要记住这一点。您的代码可能可以找到作为 的子节点的导入节点body，但情况可能并非总是如此，具体取决于您插入它的位置。下面的代码动态定位导入内容的父节点，并将始终将其删除，无论它最终位于 DOM 中的哪个位置。
最后，这是非常重要的，尽管您已经表示不想隐藏/显示元素，而是希望附加并删除它，但这样做在性能方面非常昂贵。每次在 DOM 中添加或删除元素时，都必须重新构建整个 DOM，并且您删除的节点不一定会从内存中删除，即使它们不再存在于 DOM 中。因此，请自行承担风险。简单地隐藏/显示内容实际上要好得多（从性能的角度来看）。
let element = document.getElementById('my-element');
function toggle () {
// Attempt to reference the element in the document, not the template content
var imported = document.querySelector(".imported");
// Check for the element, not the template content
if (document.body.contains(imported)) {
// Element exists, call removeChild on its parent
imported.parentNode.removeChild(imported);
} else {
// Use .importNode to bring template content in:
document.body.appendChild(document.importNode(element.content, true));
}
}
document.getElementById('my-button').addEventListener('click', toggle);<button id="my-button">Toggle</button>
<template id="my-element">
<div class="imported">Some content</div>
</template>