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.

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

では今回はこの辺で