我想使用 JS 原生脚本创建 HTML 对象。我有一个函数,可以绘制一些文本,我想优化它。
当我使用它时,它必须使用循环在 HTML 中写入一些文本来进行多次不同的迭代,但我发现新循环不会在 HTML 中创建新对象,而是重新创建之前的对象。
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
console.log(primaryArray);
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter ++) {
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
我尝试使用构造函数但没有成功。正在考虑每次迭代都创建一个新变量,但我不知道如何做这样的事情,也没有找到任何信息
在循环内创建元素
div
。在您的情况下,您只创建一次 div
,因此它会被覆盖
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
// changed here
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
试试这个:
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
console.log(primaryArray);
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
当您多次调用
paintPrimary
时,它会为每次调用创建单独的div元素集,而不是覆盖之前的内容。