Question

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

模板看起来像这样：

2,3,4,5

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

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

}

我也尝试访问模板中的div并更改其类，但是，我一直收到错误消息，即我尝试访问的元素未定义。有谁知道我怎么解决这个问题？

Answer 1

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

按div.wrapper选择var div = cloneTemplate.querySelector( '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。

更改模板中的元素类

1 个答案: