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

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

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

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

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

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

// 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 before() method in the para1 tag
// to add the span tag before the para1 paragraph
// element
para1.before(span);

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

// 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 before() method in the para1 tag
// to add the span tag before the para1 paragraph
// element
para1.before(span);
para1.before("I'm just a text");

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

<!-- 

    I'm a span tag I'm just a text
    I'm paragraph 1
    I'm paragraph 2

-->

この例を見るJSBin .

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