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

2022年3月16日

環境
Google Chrome 99.0.4844.51

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<div id="cft">東京tokyo</div>
<p><input type="button" value="追加" onclick="AddBtn()"></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>
<!DOCTYPE html> <html> <body> <div id="cft">東京tokyo</div> <p><input type="button" value="追加" onclick="AddBtn()"></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>
<!DOCTYPE html>
<html>
<body>
 <div id="cft">東京tokyo</div>
<p><input type="button" value="追加" onclick="AddBtn()"></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