createElement

document.createElement

建立物件的方法

指定在某一個區段來產生元素，例如：<div id="result"></div>

// 1. 生成 checkbox

const checkboxFalse = document.createElement("input");

checkboxFalse.type = "checkbox";

checkboxFalse.checked = false;

document.getElementById("result").appendChild(checkboxFalse);

const checkboxTrue = document.createElement("input");

checkboxTrue.type = "checkbox";

checkboxTrue.checked = true;

document.getElementById("result").appendChild(checkboxTrue);

// 2. 生成下拉選單

const dropdown = document.createElement("select");

for (let i = 1; i <= 5; i++) {

  const option = document.createElement("option");

  option.text = "項目 " + i;

  dropdown.appendChild(option);

}

document.getElementById("result").appendChild(dropdown);

// 3. 生成表格

const table = document.createElement("table");

table.style.borderCollapse = "collapse";

table.style.border = "2px solid black";

for (let i = 0; i < 3; i++) {

  const row = document.createElement("tr");

  for (let j = 0; j < 3; j++) {

    const cell = document.createElement("td");

    cell.style.border = "1px solid black";

    cell.style.fontSize = "14px";

    cell.style.color = "blue";

    cell.textContent = "儲存格 " + (i + 1) + "-" + (j + 1);

    row.appendChild(cell);

  }

  table.appendChild(row);

}

document.getElementById("result").appendChild(table);

插入文字

const lastText = document.createElement("span");

lastText.style.fontSize = "20px";

lastText.style.fontStyle = "italic";

lastText.style.color = "brown";

lastText.textContent = "這是插入的文字。";

resultDiv.appendChild(lastText);