如何創建子元素並將其移動到父元素中？

Question

我正在嘗試創建 Tic-Tac-Toe 游戲，現在的問題是我在點擊空白區域時創建了 svg 元素，但不知道如何將其移動到父元素中（以及如何制作該子元素）。 需要您的幫助，謝謝！

let clickableAreas = document.querySelectorAll('.clickable-area');
let step = true;

function clickArea(e) {
  if(step) {
    let img = document.createElement('img');
    img.src = './images/cross.svg';
    step = false;
  }
  else {
    let img = document.createElement('img');
    img.src = './images/circle.svg';
    step = true;
  }
  // testing class toggle
  e.classList.toggle("empty");
}

for(let i = 0; i < clickableAreas.length; i++) {
  document.addEventListener("click", function(event) {
    clickArea(event.target);
  });
}

Answer 1

到目前為止，您的代碼看起來不錯。 您應該能夠調用appendChild將圖像添加到正確的區域。

function clickArea(e) {
  let img = document.createElement('img');
  if(step) {
    img.src = './images/cross.svg';
    step = false;
  }
  else {
    img.src = './images/circle.svg';
    step = true;
  }
  // testing class toggle
  e.classList.toggle("empty");

  // Add the image to the DOM element
  e.appendChild(img);
}

Answer 2

您可以使用element.appendChild(childElement)添加元素。 一個例子是

const parent = document.getElementById('parent'); 

const img = document.createElement('img');
img.src = './images/circle.svg';

parent.appendChild(img);

會導致 html 看起來像

<div id='parent'> 
  <img src="./images/circle.svg">
</div>

Answer 3

一旦你的元素被創建，你需要（正如你所提到的）將它添加到另一個節點，該節點將成為這個新元素的父節點。 為此，您可以使用Node.appendChild(childNode)來執行此操作：將childNode附加到Node

function clickArea(e) {
  let parent = e // or get your parent element.
  if(step) {
    let img = document.createElement('img');
    img.src = './images/cross.svg';
    step = false;
    parent.appendChild(img)
  }
  else {
    let img = document.createElement('img');
    img.src = './images/circle.svg';
    step = true;
    parent.appendChild(img)
  }
  // testing class toggle
  e.classList.toggle("empty");
}

我還建議在 if 之外提取img創建，這樣您就可以避免重復代碼：

function clickArea(e) {
  let parent = e // get your parent element.
  let img = document.createElement('img');
  if(step) {
    img.src = './images/cross.svg';
    step = false;
    parent.appendChild(img)
  }
  else {
    img.src = './images/circle.svg';
    step = true;
    parent.appendChild(img)
  }
  // testing class toggle
  e.classList.toggle("empty");
}