「JavaScript」appendChildで画像を追加するサンプル

2022年3月16日

環境
Google Chrome　99.0.4844.51

書式
appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。
追加しようとしたノードが既に存在していた場合は、 appendChild() はその子ノードを現在の位置から新しい位置へ移動します。

使用例

<!DOCTYPE html>
<html>
<body>
 <div id="cft">東京tokyo</div>
<p><input type="button" value="追加"></p>
<script>
function AddBtn(){
  //div要素セレクタ名cftの取得
  const fc = document.getElementById("cft");
  const imgEle = document.createElement("img");
  
  //imgタグの属性を設定します
  imgEle.src = "./img/logo.png";
  imgEle.width = 100;
  imgEle.height = 100;
  imgEle.style.cssText = "margin-left:15px";
  
  //div要素に子ノードを追加します
  fc.appendChild(imgEle);
}
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、画像「logo.png」を追加します

JavaScript

Posted by arkgame