createElement()とは？JavascriptとDOM初心者の勉強

createElement()の存在感が自分の中で薄かったので、深掘りしてみます。

createElement()とは

createElement()はHTMLの要素を作る時に使われます。主にDOM操作で使用され、appendChild()とセットで使われています。
動的にHTMLの要素を作成する時に使用され、すべて記入されたらボタンを表示するなど動的なサイトを作成できます。

構文

document.createElement(生成する要素)

生成する要素にはpタグ、divタグなどのhtmlタグを書きます。

簡単なサンプル

See the Pen createElement by Nakamoto (@programmerlife) on CodePen.

createElement()メソッドで pタグを生成して innerText()メソッドでpタグ内の文字列を追加し、appendChild() メソッドで html に pタグを追加しています。

createElement()を使ったサンプルコード

せっかくなのでもう一つサンプルコードをつくってみました。

See the Pen createElement入力した文字を表示 by Nakamoto (@programmerlife) on CodePen.

Javascriptを抜粋して解説

// inputタグがフォーカスアウトしたら
const blurFunction = () => {
    // inputタグの要素を取得
    const input = document.querySelector("input");
    // pタグを作成
    const p = document.createElement("P");
    // pタグの中身をinputタグのvalueの値にする
    p.innerText = input.value;
    // 画面に表示
    document.body.appendChild(p);
};

アロー関数でファンクションは書いています。

アロー関数とは？Javascript初心者の勉強

おわり

createElement()メソッドだけではあまり使えないけれど、縁の下の力持ちタイプですかね。
今回はpタグを作成しましたが、例えばデータベースの値でリストを作りたい時なんかは便利なのかもしれないですね。いつか使ってみたいですね。

参考

https://www.w3schools.com/jsref/met_document_createelement.asp