JavaScript»ウェブ»createElement 新しい要素を作る(textContent)

ファイル名: js-web/quest_03019.html

次の手順で実行してみましょう。

  1. 1. 下のソースコードを写す。
  2. 2. 実行ボタンを押す。

実行画面

ソースコード

<input type="button" value="実行" onclick="run()">
<div id="contents"></div>
<script>
	function run() {
		const div = document.getElementById('contents');
		const content = document.createElement('p');
		content.textContent = 'contents!';
		div.appendChild(content);
	}
</script>

解説

createElementは新しい要素を作ります。
作った要素を<div>要素の中にappendChildで追加します。
textContentで<p>要素の中身を書きます。