innerHTMLへの正しい割り当て方法

Question

このコード行はなぜ機能しますか？

var elem = document.getElementById("button"); 
elem.firstChild.innerHTML = "Enable"; 

しかし、これはありませんか？ここで

var elem = document.getElementById("button").firstChild.innerHTML; 
elem = "Enable"; 

Answer 1

var elem = document.getElementById("button"); 
elem.firstChild.innerHTML = "Enable"; 

あなたは、要素のinnerHTMLプロパティを変更しています。

var elem = document.getElementById("button").firstChild.innerHTML; 
elem = "Enable"; 

innerHTMLをelemに格納していて、上のコードでローカル変数を変更するだけです。

すべてを1行に入れることができ、temp変数は必要ありません。

document.getElementById("button").firstChild.innerHTML = "Enable"; 

も正常に動作するはずです。

Answer 2

var elem = document.getElementById("button"); // elem with id button 
elem.firstChild.innerHTML = "Enable"; 

上記のコードは、elemのfirstChildのinnerHtmlを更新しています。

var elem = document.getElementById("button").firstChild.innerHTML; // the innerHtml of firstChild of elem with id button 
elem = "Enable"; 

しかし、上記のコードは、ちょうどELEMのinnerHTMLプロパティを取得し、変数に（文字列として）、それを記憶している、あなたはそれを修正することができますが、変更はちょうどで、HTMLに表示されません。 JavaScriptの部分。

Answer 3

割り当てなしのinnerHTMLを使用すると、オブジェクトの現在の内部HTMLが返されます。

割り当てでそれを使用すると、要素に新しいHTMLが挿入されます。

最初の関数でinnerHTMLを割り当てていますが、2番目の関数でinnerHTMLを返しています。

詳細は、このドキュメントを参照してくださいhttps://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Answer 4

あなたの最初のスニペット：

1. は、変数elem
2. としてDOM要素と格納を検索"Enable"
にDOM要素の firstChild.innerHTMLプロパティを設定します

---

あなたの第二のスニペット：

1. は、DOM要素を検索し、変数elem
2. 変更elemは今elem変数がリンクされていない文字列"Enable"

を保持するようにそのfirstChild.innerHTMLプロパティを保存しますどのような方法でもDOM要素には、innerHTMLプロパティのコピーが保持されます。

Answer 5

var elem = document.getElementById("button"); 
elem.firstChild.innerHTML = "Enable"; 

「elemは」変数へのオブジェクトのように要素を割り当てている。このコードブロックで

とあらゆる種類のデータを保持することができ、それが今、最初のボタンの要素を保持しているVARのため、我々はそれから、オブジェクトのプロパティにアクセスすることができます。あなたが最初のボタンの「innerHTMLプロパティ」を割り当てるとinnerHTMLのは、文字列として値を返しているので、「elemは」変数は、現在の文字列型であり、我々は文字列型で可能である任意のものを行うことができ、このコードブロックで

var elem = document.getElementById("button").firstChild.innerHTML; 
elem = "Enable"; 

最初のボタン要素に関連していないため、最初のボタン要素にinnerHTMLを設定していないのはなぜですか？elemはinnerHTML値ではなく、最初のボタン要素を保持しています。

innerHtmlは、次のように設定できます。

$("#demo").html("Hello World By Id selector using html function"); 
     $('.demo').html('hello world By class selector using html function'); 
     $('#demo').text('Hello world By Id selector using text function'); 
     $('.demo').text(' Hello World By class selector using text function'); 
     $('div').html(' Hello World By element name selector using html function'); 
     document.getElementById("demo").innerHTML = "Hello World By Id selector using innerHTML property"; 

ここで要素はです。

<div id="demo" class="demo"></div>