【JavaScript】textContentとinnerHTMLとappendChild

textContentとinnerHTMLとappendChildを使ったサンプルを次に示す。

// divタグを生成する。
const div = document.createElement('div');
// textContentは要素のテキストコンテンツを表すプロパティである
div.textContent = '<h1>hello1</h1>';
// 生成したdiv要素をbody要素に追加する。
// <h1>hello2</h1>がbodyに追加される。このときタグはエスケープされる。
document.body.appendChild(div);
// textContentでタグを設定するとタグはエスケープされない。
console.log(div.textContent);//<h1>hello1</h1>
// textContentでタグを設定するとタグはエスケープされる。
console.log(div.innerHTML);//&lt;h1&gt;hello1&lt;/h1&gt;

// div2タグを生成する。
const div2 = document.createElement('div');
// innerHTMLは要素のHTMLコンテンツを表すプロパティである
div2.innerHTML = '<h1>hello2</h1>';
// 生成したdiv要素をbody要素に追加する。このときタグはエスケープされない。
/ <h1>hello2</h1>がbodyに追加される。
document.body.appendChild(div2);
// innerHTMLでタグを設定するとタグは無視される。
console.log(div2.textContent);//hello2
// innerHTMLでタグを設定するとタグはエスケープされない。
console.log(div2.innerHTML);//<h1>hello2</h1>

• 
• Tweet

• JavaScript