【コピペ】jsでp要素を作成・追加する方法【Javascript】

まず最初に、Javascriptでp要素を作成、textを設定するコードになります。コピペして自由にお使いください。

// p要素作成
var element = document.createElement("p");
element.textContent="テキスト";

要素の追加方法、詳しい解説は以下です。

p要素を作成して、指定idを持つ要素内に追加

以下は指定セレクタ（今回はid=”id_for_p”）を持つ要素に、作成したp要素を追加するコードです。

<div id="id_for_p">
</div>

// 指定idのHTML要素を取得
var element_id = document.querySelector('#id_for_p');

// p要素作成
var element = document.createElement("p");
element.textContent="テキスト";

// p要素を指定idに追加
element_id.appendChild(element);

実行結果

このコードでhtmlにp要素が追加され、表示は画像のようになります。

<!-- 実行結果 -->
<div id="id_for_p">
    <p>テキスト</p>
</div>

参考ドキュメント

本記事を書く際に参考にしたMDNの関連ドキュメントです。
こちらも併せてご覧ください。

Document.createElement() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement