今回は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.
これを上手く使えば、同じコードを何回も打つ手間も省け効率が上がりますよ！！
では今回はこの辺で
