キーワードから探す

カテゴリーから探す

appendChild

2021.10.24

  • 無料閲覧可能ナレッジ
  • Javascript
  • appendChildで生成した要素を複数箇所に挿入する方法

    目次

    今回はJavaScriptのappendChildで複数箇所に要素を生成する方法をご紹介。

    結論から言うと、 appendChildでは無理なのでappend(document.createTextNode(”))を使います。

    appendChildで生成した場合はこんな感じ

    See the Pen appendChild1 by ALcuesto (@ALcuesto) on CodePen.

    上記だと、<div id=”bbb”></div>の中にしか挿入されません。
    生成された同じ要素を複数の箇所に挿入というのが、出来ないわけです。
    ただ、使い回ししたい!そう思う時もあるかと思います。

    そういう時は下記のような感じでクリアになります。

    append(document.createTextNode(”)) を使った場合

    See the Pen appendChild2 by ALcuesto (@ALcuesto) on CodePen.

    これで、どちらのidにも挿入されます。今回はidで取得していますがこれをclassにしたら、
    挿入したいタグに指定のclassを付けていくだけでOKです。

    例えばこんな感じですね。

    See the Pen appendChild3 by ALcuesto (@ALcuesto) on CodePen.

    これを上手く使えば、同じコードを何回も打つ手間も省け効率が上がりますよ!!

    では今回はこの辺で


    関連記事