要素を作成するときにはelement.createElement()を使います。
createElement()は次の書式で使います。
var element = document.createElement(tagName[, options]);
tagNameには生成される要素の型(タグ名)を表す文字列を指定します。optionsには必要に応じてElementCreationOptionsオブジェクトを指定します。
次の例は、ユーザーが[作成]ボタンをクリックするとテキストを含むラベルが作成されて追加されるコードの例です。
<div id="div1"></div>
<input type="button" id="button" value="作成" onclick="clicked()" /><br />
<script type="text/javascript">
function clicked() {
var elm = document.createElement("label");
var newContent = document.createTextNode("これは新しく作られたラベルです。");
// テキストノードを新規作成した要素に追加する
elm.appendChild(newContent);
// 新しく作られた要素を追加する
const div1 = document.getElementById("div1");
div1.appendChild(elm);
}
</script>
実行すると次のように表示されます。