[JS]innerTextとinnerHTML

4572 ワード
JavaScript テキストリンク
この2つのプロパティはtext要素かhtml要素かによって異なります.

値取得時


HTML


<div id='content'>
  <div>A</div>
  <div>B</div>
</div>

JS


////innerTEXT
  const element = document.getElementById('content');

  alert(element.innerText); //A B

  alert(element.innerHTML); // <div>A</div>
		            // <div>B</div>
innerTextはテキストの値のみを取得します.
内部HTMLはHTMLをインポートしています.

設定値の場合


html

<div id='content'></div>

JS

const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";
}

/// <div style='color:red'>A</div>

const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>";
}

/// A
innerTextはcontentでtextに設定されているのでhtmlコードは文字列で設定されます
innerHTMLでは、htmlコードを入力すると要素に含まれ、テキストAのみが表示されます.
フォーム入力タイプと分岐
AWS セキュリティグループとネットワークACLの違い