Javascript 如何使用JS动态创建这些HTML元素
我想创建这个布局，动态地创建它的列表，从数据库获取数据并填充 以下是布局代码：Javascript 如何使用JS动态创建这些HTML元素,javascript,html,dom,appendchild,Javascript,Html,Dom,Appendchild,我想创建这个布局，动态地创建它的列表，从数据库获取数据并填充 以下是布局代码： 人名 状态 城市 拉链 人名 状态 城市 拉链 您可以使用for循环将HTML附加到您选择的元素中。循环中的i是从数据库接收的元素的大小 for（让i=1；i我将生成与上图中所述相同的设计。在文件中添加CSS。动态javascript创建多个数据 $（文档）.ready（函数（）{ 对于（i=0；i 如果您的数据是一个对象数组，则可以在插入DOM之前对其进行迭代以生成HTML* 在这里，我使用了一个help
人名
状态
城市
拉链
人名
状态
城市
拉链
for（让i=1；i我将生成与上图中所述相同的设计。在文件中添加CSS。动态javascript创建多个数据
$（文档）.ready（函数（）{
对于（i=0；i
如果您的数据是一个对象数组，则可以在插入DOM之前对其进行迭代以生成HTML*
在这里，我使用了一个helper函数来生成每个个人卡片的HTML（personCardHtml
）。它返回一个值，该值在HTML中的正确位置填充个人的详细信息
我在人的数组中使用了来生成所有人卡片的单个HTML字符串
然后我将该html字符串插入
const people=[{“name”：“Henrietta Marsh”，“state”：“Northern Mariana Islands”，“city”：“Ernstville”，“zip”：7226}，{“name”：“Sandy Copeland”，“state”：“怀俄明州”，“city”：“Hobucken”，“zip”：4594}，{“name”：“Logan Frank”，“state”：“波多黎各”，“city”：“Talpa”，“zip”：8670}]
const personCardHtml=（person）=>{
返回`
${person.name}
${person.state}
${person.city}
${person.zip}
`
}
const reducer=（累加器，currentValue）=>累加器+personCardHtml（currentValue）；
const personsHtml=people.reduce（reducer“”）
const container=document.querySelector（“#persons container”）
container.insertAdjacentHTML（'beforeend'，personsHtml）；
使用以下代码创建动态元素并向该元素添加属性
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to create a P element with some text, and append it to DIV.</p>
<div id="myDIV">
A DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
#myDIV{
边框：1px纯黑；
边缘底部：10px；
}
单击按钮创建一个带有一些文本的p元素，并将其附加到DIV
DIV元素
试试看
函数myFunction（）{
var para=document.createElement（“P”）；
para.innerHTML=“这是一个段落。”；
文件.getElementById（“myDIV”）.appendChild（第段）；
}
使用纯javascript您可以做到这一点。
演示：
函数生成列表（）{
变量personList=[
{姓名：“Abc”，州：“41”，城市：“美国”，邮编：“124”}，
{姓名：“Abc”，州：“41”，城市：“美国”，邮编：“124”}，
{姓名：“Abc”，州：“41”，城市：“美国”，邮编：“124”}，
{姓名：“Abc”，州：“41”，城市：“美国”，邮编：“124”}，
{姓名：“Abc”，州：“41”，城市：“美国”，邮编：“124”}
]
让设计=”；
对于（让个人列表中的项目）{
设计+=`
${item.name}
${item.state}
${item.city}
${item.zip}
`
}
console.log（“da”，设计）
document.getElementById（“设计ID”）.innerHTML=design；
}
您可以使用js中的模板文本来解决您的问题
JS-Bin
让root=document.getElementById（“root”）；
警察人员=[
{
姓名：“person1”，
州：“个人1_州”，
城市：“人1_城市”，
zip：“个人1_-zip”
},
{
姓名：“person2”，
州：“个人2_州”，
城市：“人2_城市”，
zip：“个人2_-zip”
},
{
姓名：“person3”，
州：“个人3_州”，
城市：“人3_城市”，
zip：“个人3_-zip”
},
{
姓名：“person4”，
州：“个人4_州”，
城市：“人4_城市”，
zip：“个人4_-zip”
}
];
const renderPerson=个人=>{
让数据=``；
persons.forEach（person=>{
数据+=`
${person.name}
${person.state}
${person.city}
${person.zip}
`;
});
返回数据；
};
root.innerHTML=renderPerson（个人）；
你能使用jQuery Appender吗？你在js中尝试过模板文本吗？嘿，m8，现在我需要获得每个事件，点击人名：Person+i+
并显示一个与数字相关的日志，如下图所示：document.getElementById（“title”+i）.addEventListener（'click'，function（）{console.log（i）}）；但在某种程度上，代码只显示最后一个用户（或最后一个i，在本例中，编号9），其他用户则不起作用。有任何提示吗？请为此创建另一个问题
<div class="row" id="designId"><div>
<input type="button" onClick="generateList()" value="generateList" />
function generateList() {
var personList = [
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" }
]
let design = "";
for(let item of personList){
design += `
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>${item.name}</strong></h4>
<h4>
<small>${item.state}</small>
</h4>
<h4>
<small>${item.city}</small>
</h4>
<h4>
<small>${item.zip}</small>
</h4>
</div> `
}
console.log("da",design)
document.getElementById("designId").innerHTML = design;
}