Question

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

2019-10-03

2398

javascript

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

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>');