JavaScriptで要素追加！appendChild()メソッドの使い方

親要素.appendChild(追加する要素);

// 新しい要素を作成
const newElement = document.createElement('p');
newElement.textContent = 'こんにちは！';

// 親要素を取得
const parentElement = document.getElementById('container');

// 新しい要素を追加
parentElement.appendChild(newElement);

<div id="container">
  <!-- ここに新しい要素が追加されます -->
</div>

function addListItem() {
  // 新しいli要素を作成
  const newItem = document.createElement('li');
  newItem.textContent = '新しいアイテム';
  
  // ul要素を取得して追加
  const list = document.querySelector('ul');
  list.appendChild(newItem);
}

// ボタンクリックで実行
document.getElementById('addButton').addEventListener('click', addListItem);

<button id="addButton">アイテムを追加</button>
<ul>
  <li>既存のアイテム1</li>
  <li>既存のアイテム2</li>
</ul>

// 画像要素の追加
function addImage() {
  const img = document.createElement('img');
  img.src = 'sample.jpg';
  img.alt = 'サンプル画像';
  img.className = 'thumbnail';
  
  document.getElementById('imageContainer').appendChild(img);
}

// 要素の複製
const original = document.getElementById('original');
const clone = original.cloneNode(true);
anotherParent.appendChild(clone);

const parent = document.getElementById('parent');
if (parent) {
  parent.appendChild(newElement);
} else {
  console.error('親要素が見つかりません');
}