JSで新しい要素の子を修正する方法（まだページに入っていないとき）

Question

JSでテンプレート化するようなことをしようとしています。例の使用例は、私は2つのオブジェクト、矩形と円を持つページを持っています。私が四角形をクリックすると、それは私にテキストの長方形を削除するhtmlボタンを表示する必要があります。

実際には、テンプレートファイル（panel.htm）にajax getを呼び出して、このファイルの内容を取得します。次に、JSを使ってdiv要素を作成します。次に、innerHTMLにpanel.htm（template）を設定します。このテンプレートでは。

私が欲しいのは、このボタンをイントラhtmlを作成して入力したdiv内で変更することです。 Imは要素にByIdが定義されていないため、getByClassを使用しています。

ボタンへの変更は元のdivに伝播/コピーされません。

 
    // Template data 
 
    var html = `<div> 
 
        <button class="delBtn" type="button">OLD TEXT</button> <br> 
 
       </div>`; 
 
     
 
    // creating new div. 
 
    var div = document.createElement('div'); 
 

 
    // putting template to new div 
 
    div.innerHTML = html; 
 

 
    // accessing the button from the inserted template 
 
    div.getElementsByClassName('delBtn').innerHTML = "NEW BUTTON TEXT"; 
 
    
 
    // There I would expect to get div with button inside with NEW TEXT 
 
    console.log(div); 
 

 
    // In production here will be some insertion to page etc. This is just bare example of code.

私は、これは、いくつかのテンプレートフレームワークを使用して解決することができる知っています。しかし、可能であれば、JSをきれいにしておきたいと思っています。また、これは私にとっては新しいものなので、少し勉強したいと思っています。どこでも答えを見つけることはできませんでした。

これは私には純粋な基本的なもののようですので、この質問は冗長ではないと思います。

Answer 1

あなたは

div.getElementsByClassName('delBtn')[0].innerHTML = "NEW BUTTON TEXT"; 

のような最初は、これは動作します取得したい場合がありますのでgetByClassは常にHTMLCollectionを返します！

あなたはそれを試してみたい場合にも

document.body.appendChild(div); 

Answer 2

@thatOneGuyは、右あなたが取得しようとしているクラスのインデックスを選択する必要がありますされますが、またあなたののdiv変数が

が表示されます

<div> 
    <div> 
     <button class="delBtn" type="button">OLD TEXT</button> <br> 
    </div> 
</div>