Javascript 更改模板中元素的类

我有一个html模板，点击一个按钮，我克隆并附加到一个div。我想更改嵌套在模板中的div的类名，但是，我不知道如何更改。我试着在JavaScript中查找它，但我找不到任何方法，我找到的唯一帖子是关于VisualStudio代码等，但是，正如前面提到的，我想在JavaScript中这样做

模板如下所示：

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

现在，我想更改新生成元素的类。我尝试了以下方法：

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

我还尝试访问模板内的div并更改其类，但是，我不断收到错误消息，即我尝试访问的元素未定义。

---

有人知道我如何解决这个问题吗？

如果您记录

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

删除克隆模板。删除属性（“id”），因为它会引发错误，而您克隆的内容不包含任何id。
您需要了解范围。这是什么意思？我正在尝试更改addElement（）函数中的类名，这样就不会有问题，或者我在这里速度慢？@SennerP这并不重要，因为我知道如何更改类名，问题是我在访问要更改名称的元素时遇到问题非常感谢您的回复，它工作得很好！不过，我有一个问题，在前面，当我尝试更改类名时，我尝试了使用querySelector，在您使用querySelector的地方使用querySelector，但是，它不起作用。你知道为什么（我希望这不会偏离我最初的问题太远）querySelector将返回节点列表（），而querySelector返回第一个元素（）
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);
}