我有一个像这样的 JSON 对象数组:
var array = [
{title : "TEST1", img : "http://www.myTest1.com/test1.jpg"},
{title : "TEST2", img : "http://www.myTest2.com/test2.jpg"},
{title : "TEST3", img : "http://www.myTest3.com/test3.jpg"}
]
我想创建以下 bloc 元素(使用之前的数组)并将此 bloc 添加到现有的 <div id="content"></div>
中在我的网页中:
<div id="line1">
<div class="item">
<h2 id="item_text">
<span>TEST1</span>
</h2>
<div class="img-div">
<img id="item_img" src="http://www.myTest1.com/test1.jpg" alt="" height="333px" width="500px" />
</div>
</div>
<div class="item">
<h2 id="item_text">
<span>TEST2</span>
</h2>
<div class="img-div">
<img id="item_img" src="http://www.myTest2.com/test2.jpg" alt="" height="333px" width="500px" />
</div>
</div>
<div class="item">
<h2 id="item_text">
<span>TEST3</span>
</h2>
<div class="img-div">
<img id="item_img" src="http://www.myTest3.com/test3.jpg" alt="" height="333px" width="500px" />
</div>
</div>
</div>
我如何在 Javascript
中做到这一点?/JQuery
?
最佳答案
试试这个 FIDDLE
创建一个模型,用于存储要填充的 HTML 内容。遍历数组并附加它。
var line = $("#line1");
for (a in array) {
appendModel(a);
}
function appendModel(num) {
var model = '<div class="item"><h2 id="item_text"><span>' + array[num].title +
'</span></h2><div class="img-div"><img id="item_img" src="' + array[num].img + '
" alt="" height="333px" width="500px" /></div></div>';
line.append(model);
}
关于javascript - 使用 jQuery 添加 div block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22811517/