テンプレート内の要素のクラスを変更

Question

ボタンをクリックすると、クローンしてdivに追加するhtmlテンプレートがあります。テンプレートの中に入れ子になっているdivのクラス名を変更したいのですが、どのようにしたらいいのか分かりません。私はそれを見てみましたが、私はJavaScriptでそれを行うための方法を見つけることができませんでしたが、私が見つけた唯一の記事はVisual Studio Codeなどでしたが、言及したように、私はJavaScriptでこれをしたいです。このような

テンプレートを見て何か：私はクラスを変更したい、今すぐ

function addElement() { 

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

} 

：

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

これは私がクローンやテンプレートを追加する方法です新しく生成された要素。私が使用してこれを試してみました：

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

私はまた、テンプレート内のdiv要素にアクセスし、そのクラスを変更してみました、しかし、私は、私がアクセスしようとする要素が未定義であるというエラーメッセージが出続けます。 これをどのように修正できるか誰にでも分かりますか？ div.wrappervar div = cloneTemplate.querySelector('div.wrapper');で選択し、ご希望の出力になりますdiv.className = 'newName';にそのクラスを変更DocumentFragment [ #text, div.wrapper, #text ]

：あなたはvar cloneTemplateの内容をログに記録した場合

Answer 1

あなたはこのような何かを受け取ることになります。あなたの関数にまとめ

：

それはエラーをスローして、クローン化されたコンテンツは、任意のIDを含んでいないので、 cloneTemplate.removeAttribute("id");を削除

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

。