更改模板中元素的类

Question

我有一个 html 模板，点击一个按钮，我克隆并附加到一个 div。我想更改嵌套在模板内的 div 的类名，但是，我不知道如何。我尝试查找它，但在 JavaScript 中找不到任何方法，我发现的唯一帖子是关于 Visual Studio Code 等，但是，如前所述，我想在 JavaScript 中执行此操作。

模板看起来像这样：

<template id="newElement">
    <div class="wrapper">
        <p>Test Paragraph</p>
    </div>
</template>

这就是我克隆和附加模板的方式：

function addElement() {

    var listElement = document.getElementById('newElement');
    var cloneTemplate = listElement.content.cloneNode(true);
    var list = document.getElementById("list");
    list.appendChild(cloneTemplate);
    cloneTemplate.removeAttribute("id");

}

现在，我想更改新生成元素的类。我试过这个：

cloneTemplate.content.className = "newName";
cloneTemplate.className = "newName";

我还尝试访问模板中的 div 并更改其类，但是，我不断收到错误消息，指出我尝试访问的元素未定义。 有谁知道我该如何解决这个问题？

Answer 1

如果您记录var cloneTemplate 的内容，您将收到如下信息：DocumentFragment [ #text, div.wrapper, #text ]

通过var div = cloneTemplate.querySelector( 'div.wrapper' ); 选择div.wrapper 并将其类更改为div.className = 'newName'; 将产生您想要的输出。

放在你的函数中：

function addElement() {
    var listElement = document.getElementById('newElement');
    var cloneTemplate = listElement.content.cloneNode(true);

    var div = cloneTemplate.querySelector( 'div.wrapper' );
    div.className = 'newName';

    var list = document.getElementById("list");
    list.appendChild(cloneTemplate);
}

删除了cloneTemplate.removeAttribute("id");，因为它会引发错误并且您克隆的内容不包含任何 ID。