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をきれいにしておきたいと思っています。また、これは私にとっては新しいものなので、少し勉強したいと思っています。どこでも答えを見つけることはできませんでした。
これは私には純粋な基本的なもののようですので、この質問は冗長ではないと思います。
div.getElementsByClassName( 'delBtn')[0] .innerHTML = "NEW BUTTON TEXT"; ...このような最初の要素を選択します。私はそれをIDとそれを選択することをお勧めしますように、私はあなたがしたいのか分からないが、再び 'delBtn'クラスを使用することがあります – thatOneGuy
ので、基本的にボタンのテキストのみを変更したいですか?? –
@thatOneGuy:私は同意しますが、このdivのIDだけgetElementする方法はありますか?私が見つけたものから、私はエルをすることができます。ドキュメントからちょうどIDで。 – DrMacak