問題一覧に戻る
中級dom
問題106: createElement

createElementメソッドによる動的なDOM要素の作成を学びましょう。document.createElementはJavaScriptから新しいHTML要素を作成するメソッドで、タグ名を引数に指定して要素を生成します。作成された要素はメモリ上に存在し、appendChildなどでDOMに追加するまでは表示されません。動的なUIの構築、リストの動的生成、ユーザー入力に基づくコンテンツの生成など、現代的なWebアプリケーションで必須の機能です。

const document = {
  createElement: (tag) => ({
    tagName: tag.toUpperCase(),
    textContent: ""
  })
};

const div = document.("div");
console.log(div.tagName);

const button = document.("button");
button.textContent = "Click";
console.log(`<${button.tagName.toLowerCase()}>${button.textContent}</${button.tagName.toLowerCase()}>`);