JavaScriptでDOM要素の後に要素を加える方法?

Originally posted here!
要素の後にテキストまたは要素を挿入するには、after() JavaScriptの要素オブジェクト内のメソッド.
このようなHTML構造を持っているとしましょうdiv タグと2paragraph その中のタグ

<div>
  <p id="para1">I'm paragraph 1</p>
  <p id="para2">I'm paragraph 2</p>
</div>

この後、テキストや他の要素を挿入したい場合はpara1 段落タグ?まあ、心配しないで、我々はafter() メソッドpara1 要素またはテキストを挿入する段落タグ.
まず、リファレンスを取得しましょうpara1 段落タグ

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

さあ、使いましょうafter() メソッドpara1 エレメントアンドパスspan 要素への引数after() メソッド.

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the after() method in the para1 tag
// to add the span tag after the para1 paragraph
// element
para1.after(span);

また、テキストコンテンツをafter() メソッド.

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the after() method in the para1 tag
// to add the span tag after the para1 paragraph
// element
para1.after(span);
para1.after("I'm just a text");

現在、出力はこのようになります.

<!-- 
    I'm paragraph 1
    I'm just a text I'm a span tag
    I'm paragraph 2
 -->

この例を見るJSBin .

お気軽に共有する場合は、この便利な発見😃.