1

JavaScript で動的に作成される HTML 要素を理解しようとしています。具体的には、値属性のない HTML でボタンを作成すると、テキストなしで表示される理由を誰かが説明できます。次に値を追加すると、テキストがボタンに表示されます。また、次のように値を警告することもできます。

var Button1 = document.getElementById("Button1");
Button1.value = "test";
alert(Button1.value);

しかし、ボタンを動的に生成してから値を追加すると、ボタンには表示されませんが、それでも警告することはできます。

var Button1 = document.createElement("button");
var Div1 = document.getElementById("Div1");
Button1.value = "test";
Div1.appendChild(Button1);
alert(Button1.value);

2 番目の例では、ボタンのテキストは変更されませんが、値は依然としてアラートです。createTextNode を使用してボタンに追加できることはわかっていますが、JavaScript によって動的に生成されたコントロールと HTML で作成されたコントロールの違いを理解しようとしています。

私の質問を読んでくれてありがとう。

4

4 に答える 4

2

2 番目の例では、新しい要素を作成してそれに値を割り当てていますが、それを DOM に追加していません。純粋に JavaScript に存在するため、アラートが機能します。ページにボタンを表示するには、通常は appendChild() を使用して、ボタンをドキュメントに追加する必要があります。

「しかし、ボタンを動的に生成してから値を追加すると、ボタンに表示されませんが、それでもアラートを出すことができます。」「ボタンのテキストは変更されませんが、値はまだ警告されます」これは、2番目の例のコードが変更されると予想されるページにボタンが既にあるように見えるため、少し混乱します。

最初の例は、DOM に既に存在する要素を取得し、その値を割り当て (または変更)、アラートを出す方法の教科書的な例です。

更新: 改訂された質問に答えるために、コードはボタンの値を変更していますが、ページ上のボタンのテキストが変更されることが予想される場合は、のように innerHTML の値を変更する必要がありますButton1.innerHTML = "test";。ボタン要素は、値がボタンのテキストとして表示される入力ボタンとは異なります。ボタン要素のテキストは、開始タグ<button>と終了</button>タグの間のテキストから取得されます。

例：<button value="test">test</button>

于 2012-04-19T20:24:18.353 に答える
1

2 番目のコード スニペットでは、Button オブジェクトは DOM の一部ではないため、ブラウザーには表示されません。

于 2012-04-19T20:23:18.947 に答える
0

2 番目の例では、実際にはボタンを HTML ページのどこにも配置していません。Javascript の変数として存在するだけです。そのため、ボタンのテキストが変更されていない場所がどこにあるのかわかりません。そのボタン全体がどこにも表示されていません。ページに表示されるボタンは、ページに追加するまで (通常は、既にページにある要素で appendChild() を呼び出して)、Javascript で作成したボタンではありません。

于 2012-04-19T20:27:32.560 に答える
0

ボタン要素の値属性はボタンのテキストを変更しないため、画像などのようにボタンタグ内に必要なものをすべて配置できるため...:

http://jsfiddle.net/jgQGe/2/

たとえば、最初のコード スニペットは Chrome では機能しません。value 属性を使用してボタンのテキストを変更することはできません。

ボタン要素のテキストは myButton.innerHTML で設定できますが、myButton.value では設定できません。

于 2012-04-19T20:34:56.617 に答える