2016-10-12 9 views
0

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

実際には、テンプレートファイル(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をきれいにしておきたいと思っています。また、これは私にとっては新しいものなので、少し勉強したいと思っています。どこでも答えを見つけることはできませんでした。

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

+1

div.getElementsByClassName( 'delBtn')[0] .innerHTML = "NEW BUTTON TEXT"; ...このような最初の要素を選択します。私はそれをIDとそれを選択することをお勧めしますように、私はあなたがしたいのか分からないが、再び 'delBtn'クラスを使用することがあります – thatOneGuy

+0

ので、基本的にボタンのテキストのみを変更したいですか?? –

+0

@thatOneGuy:私は同意しますが、このdivのIDだけgetElementする方法はありますか?私が見つけたものから、私はエルをすることができます。ドキュメントからちょうどIDで。 – DrMacak

答えて

0

あなたは

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

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

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

document.body.appendChild(div); 
+0

これは決して配列ではなく、ライブHTMLCollectionです。 – Quentin

+0

あなたは絶対に正しいです。配列のように見えますが、HTMLCollectionではそのことを言い換えます。 –

+0

ありがとう!私は要素を** S **に変更したことを覚えていますが、これから配列が得られるという考えは得られませんでした。残念だ。 – DrMacak

0

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

が表示されます
<div> 
    <div> 
     <button class="delBtn" type="button">OLD TEXT</button> <br> 
    </div> 
</div> 
関連する問題