javascript - 使用 jQuery 添加 div block 元素

Question

我有一个像这样的 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 ？

Answer 1

试试这个 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);
 }