javascript - 使用 javaScript 将元素添加到 DOm 结构中

Question

我用 java 脚本 DOM 创建了一个表，但是出了点问题。首先这是我的代码

var tblBody = document.getElementById("cocktailtablebody");
for (var i = 0; i < mydata.length; i++) {
  var row = document.createElement("tr");

  var cell = document.createElement("th");
  var cellText = document.createTextNode(mydata[i].name);
  cell.appendChild(cellText);
  row.appendChild(cell);

  let str = "<ul>";
  for (const [p, val] of Object.entries(mydata[i].ingredients)) {
    str += `<li>${p}:${val}</li>`;
  }
  str += "</ul>";
  var cell = document.createElement("td");
  var cellText = document.createTextNode(str);
  cell.appendChild(cellText);
  row.appendChild(cell);
  var cell = document.createElement("td");
  var cellText = document.createTextNode("1");
  cell.appendChild(cellText);
  row.appendChild(cell);
  var cell = document.createElement("td");
  var cellText = document.createTextNode("2");
  cell.appendChild(cellText);
  row.appendChild(cell);
}     

但结果是

<ul>并且<li>不是写成html标签，而是写成普通文本？

怎么了？？

mydata 是一个 json

 [
    {
        "name": "Rum & Coke",
        "ingredients": {
            "rum": 12,
            "coke": 48
        }
    }, ....]

标签： javascript

Answer 1

您必须使用innerHTML将uland呈现li为 html 元素。否则它们将被视为纯文本。

工作示例

var tblBody = document.getElementById("cocktailtablebody");

const mydata = [
  {
    name: 'name', ingredients: {
      Inc1: 'Inc 1',
      Inc2: 'Inc 2',
      Inc3: 'Inc 3',
      Inc4: 'Inc 4',
    }
  }
];
for (var i = 0; i < mydata.length; i++) {
  var row = document.createElement("tr");

  var cell = document.createElement("th");
  var cellText = document.createTextNode(mydata[i].name);
  cell.appendChild(cellText);
  row.appendChild(cell);

  let str = '<ul>';
  for (const [p, val] of Object.entries(mydata[i].ingredients)) {
    str += `<li>${p}:${val}</li>`;
  }
  str += '</ul>';
  var cell = document.createElement("td");
  var cellText = document.createElement('div');
  cellText.innerHTML = str;
  cell.appendChild(cellText);
  row.appendChild(cell);
  var cell = document.createElement("td");
  var cellText = document.createTextNode("1");
  cell.appendChild(cellText);
  row.appendChild(cell); var cell = document.createElement("td");
  var cellText = document.createTextNode("2");
  cell.appendChild(cellText);
  row.appendChild(cell);
  tblBody.appendChild(row);
}

<div id="cocktailtablebody"></div>