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

ファイル名: js-web/quest_03020.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.innerHTML = '<i>con</i><b>ten</b><u>ts!</u>';
		div.appendChild(content);
	}
</script>

解説

innerHTMLで<p>要素の中身を書きます。<i>、<b>、<u>タグがそれぞれどんな意味か、調べてみましょう。