Question

我正在为一个项目创建一个小游戏。但是，我需要仅使用<td>和tr在每个createElement中动态添加9 td（appendChild）

function trFunction() {
  var node = document.createElement("tr");
  var no = document.createElement("td");
  let tr = document.querySelector('tr')
  table1.appendChild(node);

}
let body = document.querySelector('body')
let table = document.createElement("table")
body.appendChild(table)
let table1 = document.querySelector('table')
for (var i = 0; i < 9; i++) {
  trFunction()
}

Answer 1

首先按照创建表的方式进行操作：
let table = document.createElement("table")

然后使用document.body.appendChild(table)将其附加到正文，无需像使用document.querySelector('table')那样再次查找表，因为变量table已经拥有对该表的引用。

在trFunction内部使用相同的逻辑，创建td，然后创建tr，将tr附加到td和td到table。

在下面的示例中，我使用了一些CSS只是为了更好地展示它（可以根据需要删除或设置其样式）。另外，您还会看到我在trFunction上添加了一个名为number的参数，它还是，只是为了举例说明代码，如果需要可以删除。

查看代码段中的注释以更好地理解

let table = document.createElement("table") //CREATING TABLE (<table>)
document.body.appendChild(table);           //ADDING TO BODY

function trFunction(number) {
  var tdElem = document.createElement("td"); //CREATING <td>
  let trElem = document.createElement("tr"); //CREATING <tr>
  
  trElem.textContent = number; //JUST ADDING SOME TEXT TO tr (optional)
  
  tdElem.appendChild(trElem);  //APPENDING <tr> to <td>
  table.appendChild(tdElem);   //APPENDING <td> to <table>

}

for (var i = 0; i < 9; i++) {
  trFunction(i)
}

table{
  border: 1px solid;
}
td{
  border: 1px solid red;
}

Answer 2

您可以使用getElementsByTagName定位元素，然后使用innerHTML插入新的HTML。

document.getElementsByTagName('tr').innerHTML = '<td>your html here</td>';

Answer 3

由于无法使用innerHTML，因此可以尝试appendChild甚至insertAdjecentHTML

insertAdjacentHTML()方法。第一个参数是您想要附加字符串并采用的位置（“ beforebegin”，“ afterbegin”，“ beforeend”，“ afterend”）。例如，您可以使用“ beforeend”。第二个参数就是html字符串。

基本用法：

var yourVarHere = document.getElementById('your-elements-id');
yourVarHere.insertAdjacentHTML('beforeend', '<td>your html here</td>');

甚至使用getElementsByTagName

var yourVarHere = document.getElementsByTagName('tr');
yourVarHere.insertAdjacentHTML('beforeend', '<td>your html here</td>');

Answer 4

您是否尝试过使用jQuery“ append”？

以下是文档中的示例：

$( ".container" ).append( "<h2>Greetings</h2>" );

它创建了这个：

<div class="container">
  <div class="inner">Hello</div>  
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

https://api.jquery.com/append/

Answer 5

假设我们要显示项目表-

const items =
  [ { name: "rice", cost: 1.6 }
  , { name: "beans", cost: 1.3 }
  , { name: "flour", cost: 2.0 }
  ]

我们设想一些table函数可以接受两个输入，即列标题和行数据，并且返回一个<table>...</table>元素-

const t =
  table
    ( [ "name", "cost" ]               // columns
    , items.map(i => Object.values(i)) // rows
    )

然后我们可以将表元素插入DOM中的任何位置-

document.body.appendChild(t)

要编写table，我们可以想象更多的功能：

一个html函数，它带有标签名称和子节点并返回<tag>...childNodes</tag>
一个row函数，它接受一个字符串数组并返回<tr><td>str1</td><td>str2</td>...</tr>

const table = (headers = [], rows = []) =>
  html
    ( 'table'
    , html('thead', row(headers))
    , html('tbody', ...rows.map(row))
    )

我们将继续以这种方式编写程序，并设想然后执行。编写row可以想象cell。撰写cell时会想到text-

const html = (tag, ...children) =>
{ const e = document.createElement(tag)
  children.forEach(c => e.appendChild(c))
  return e
}

const row = (cells = []) =>
  html('tr', ...cells.map(cell))

const cell = (s = "") =>
  html('td', text(s))

const text = (s = "") =>
  document.createTextNode(s)

我们终于完成了。瞧！ table曾经是您想像的事情，现在是一个工作程序。点击下面的运行以在您自己的浏览器中验证结果-

const table = (headers = [], rows = []) =>
  html
    ( 'table'
    , html('thead', row(headers))
    , html('tbody', ...rows.map(row))
    )

const row = (cells = []) =>
  html('tr', ...cells.map(cell))

const cell = (s = "") =>
  html('td', text(s))

const text = (s = "") =>
  document.createTextNode(s)

const html = (tag, ...children) =>
{ const e = document.createElement(tag)
  children.forEach(c => e.appendChild(c))
  return e
}

const items =
  [ { name: "rice", cost: 1.6 }
  , { name: "beans", cost: 1.3 }
  , { name: "flour", cost: 2.0 }
  ]

const t =
  table
    ( [ "name", "cost" ]
    , items.map(i => Object.values(i))
    )

document.body.appendChild(t)

thead {
  font-weight: bold;
}

如何在另一个创建的元素中附加元素

5 个答案: