appendとappendChild

ページや要素の最後に署名や何かのお知らせなど、別の要素を追加したい時があると思います。

・appendChild

特定の親要素の中に要素を追加するためのメソッドです。

要素を指定し、その要素の子要素として、HTMLタグを追加することができます。

追加される場所は、親要素の末尾、つまり指定した要素の閉じタグの直前となります。

　element.appendChild(aChild);

実際にサンプルで見てみましょう。

まず空の画像要素を作ります。

上記の画像見づらいところありますが、上の写真が鳥の脚になります。その下に白い画像が追加されています。

　document.body.appendChild(newImg)

親要素に対して引数に追加する要素を指定することで、親要素内の末尾に追加されます。

・append

appendChildとの違いは、一つ以上の要素を一度に追加することが可能です。

またテキストをそのまま追加することもできます。

これもサンプルを見てみます。

appendによって「おはようございます」が追加されています。

appendChildで行うとエラーとなります。

また複数指定して追加もできます。

参考までにもう一つ紹介します。

・prepend

指定の要素内の先頭に文字列やHTML要素を追加することができるメソッドです。

DOM操作を行なう上で、appendChildによる要素の追加はJavaScriptの基本となります。