【JavaScript】HTML 要素を追加・削除する方法｜createElement・append・remove・insertAdjacentHTML・実務パターンまで解説

// 1. 要素を作成
const li = document.createElement("li");

// 2. テキストや属性を設定
li.textContent = "新しい項目";
li.className = "list-item";

// 3. 親要素の末尾に追加
const ul = document.getElementById("myList");
ul.appendChild(li);

const btn = document.createElement("button");
btn.textContent = "削除";
btn.className = "btn btn-danger";
btn.setAttribute("data-id", "42");
btn.addEventListener("click", () => {
  btn.closest(".card").remove();
});

document.getElementById("toolbar").appendChild(btn);

const container = document.getElementById("container");

// 文字列とノードを同時に追加できる
const strong = document.createElement("strong");
strong.textContent = "重要";

container.append("お知らせ：", strong, "な更新があります");

const ul = document.getElementById("myList");
const li = document.createElement("li");
li.textContent = "先頭に追加された項目";

// 最初の子要素として追加
ul.prepend(li);

const ul = document.getElementById("myList");
const newLi = document.createElement("li");
newLi.textContent = "2番目に挿入";

// 2番目の子要素の前に挿入（＝2番目の位置になる）
const secondItem = ul.children[1];
ul.insertBefore(newLi, secondItem);

// referenceNode が null の場合は末尾に追加される
ul.insertBefore(newLi, null); // appendChild と同じ動作

const target = document.getElementById("item3");

// target の直前に挿入
const newBefore = document.createElement("li");
newBefore.textContent = "item3 の前に追加";
target.before(newBefore);

// target の直後に挿入
const newAfter = document.createElement("li");
newAfter.textContent = "item3 の後に追加";
target.after(newAfter);

// 文字列も渡せる（テキストノードとして挿入）
target.before("テキスト: ");

element.insertAdjacentHTML(position, htmlString);
// position: 挿入位置を指定する文字列
// htmlString: 挿入する HTML 文字列

<!-- "beforebegin" → ここ -->
<div id="target">
  <!-- "afterbegin" → ここ -->
  既存のコンテンツ
  <!-- "beforeend" → ここ -->
</div>
<!-- "afterend" → ここ -->

const target = document.getElementById("target");

// 要素の内部の末尾に追加（最もよく使う）
target.insertAdjacentHTML("beforeend", '<p class="note">追加テキスト</p>');

// 要素の内部の先頭に追加
target.insertAdjacentHTML("afterbegin", "<h3>見出し</h3>");

// 要素の直前（兄弟として）に追加
target.insertAdjacentHTML("beforebegin", "<hr>");

// 要素の直後（兄弟として）に追加
target.insertAdjacentHTML("afterend", "<p>後続コンテンツ</p>");

const list = document.getElementById("myList");

// 既存の li にクリックイベントを設定
list.querySelector("li").addEventListener("click", handleClick);

// innerHTML += で追加 → 既存の li が再生成されリスナーが消える
list.innerHTML += "<li>新しい項目</li>"; // handleClick が失われる

const list = document.getElementById("myList");

list.querySelector("li").addEventListener("click", handleClick);

// insertAdjacentHTML なら既存の li のリスナーは維持される
list.insertAdjacentHTML("beforeend", "<li>新しい項目</li>");

const item = document.getElementById("removeTarget");
item.remove(); // 要素を DOM から削除

// 削除した要素は変数に残っているため再利用可能
console.log(item.textContent); // まだアクセスできる
document.body.append(item);    // 別の場所に再追加も可能

const item = document.getElementById("removeTarget");

// 親要素から子要素を削除
item.parentNode.removeChild(item);

// すべての子要素を削除する場合
const parent = document.getElementById("container");
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

const oldEl = document.getElementById("oldMessage");
const newEl = document.createElement("div");
newEl.textContent = "更新されたメッセージ";
newEl.className = "message updated";

// oldEl を newEl に置換
oldEl.replaceWith(newEl);

// 文字列でも置換可能
// oldEl.replaceWith("テキストに置換");

const parent = document.getElementById("container");
const oldChild = parent.children[0];
const newChild = document.createElement("p");
newChild.textContent = "置換後の要素";

// 親要素から子要素を置換
parent.replaceChild(newChild, oldChild);

const ul = document.getElementById("myList");
const items = ["りんご", "みかん", "ぶどう", "いちご", "メロン"];

// 5回のリフローが発生
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  ul.appendChild(li); // 毎回 DOM が更新される
});

const ul = document.getElementById("myList");
const items = ["りんご", "みかん", "ぶどう", "いちご", "メロン"];

// DocumentFragment にまとめる
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  fragment.appendChild(li); // メモリ上に追加（リフローなし）
});

// 1回のリフローで一括追加
ul.appendChild(fragment);

<div id="todo-app">
  <input id="todoInput" type="text" placeholder="タスクを入力">
  <button id="addBtn">追加</button>
  <ul id="todoList"></ul>
</div>

const input = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const todoList = document.getElementById("todoList");

addBtn.addEventListener("click", () => {
  const text = input.value.trim();
  if (!text) return;

  const li = document.createElement("li");
  li.textContent = text;

  // 削除ボタンを追加
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "×";
  deleteBtn.addEventListener("click", () => li.remove());
  li.append(" ", deleteBtn);

  todoList.appendChild(li);
  input.value = "";
  input.focus();
});

function showNotification(message, duration = 3000) {
  const notification = document.createElement("div");
  notification.className = "notification";
  notification.textContent = message;

  document.body.insertAdjacentElement("afterbegin", notification);

  // 指定時間後にフェードアウトして削除
  setTimeout(() => {
    notification.style.opacity = "0";
    notification.addEventListener("transitionend", () => {
      notification.remove();
    });
  }, duration);
}

// 使用例
showNotification("保存しました", 2000);

const todoList = document.getElementById("todoList");

// 親要素に1つだけイベントリスナーを設定
todoList.addEventListener("click", (e) => {
  // クリックされた要素が削除ボタンかどうか判定
  if (e.target.matches(".delete-btn")) {
    e.target.closest("li").remove();
  }
});

// 後から追加された li 内の .delete-btn もイベントが動作する
function addTodo(text) {
  todoList.insertAdjacentHTML(
    "beforeend",
    `<li>${text} <button class="delete-btn">×</button></li>`
  );
}