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

Answer 2

这是你在寻找什么？

var myNewDiv = $("<div></div>");

//append content to myNewD

myNewDiv.appendTo($("#content"))

Answer 3

document.getElementById("line1").innerHTML += "<div id='content'>";

for(var i = 0; i < 3; i++) {
document.getElementById("line1").innerHTML += "<h1>" + array[i].title + "</h1>"
document.getElementById("line1").innerHTML += "<img src='" + array[i].img + "'>";
}

document.getElementById("line1").innerHTML += "</div>";

Fiddle。希望有所帮助。

Answer 4

有一个;在你的数组中它应该是a，

使用此：

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"}
]

然后你可以这样做：

var arrayLength = array.length;
var insertHTML = "";
for (var i = 0; i < arrayLength; i++) {
  insertHTML += array[i].title + array[i].img;
}

document.getElementById("youdivID").innerHTML= insertHTML;

Answer 5

您可以使用jQuery.each()创建html和jQuery.append()函数，将其附加到目标div

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"}
];

/*
 * put your target div selector here
 * I have simply played with this page elements
 */
var newHtml = '';

    $(array).each(function(index,item){
    newHtml += '<div class="item"><h2 id="'+ item.title +'"><span>'+ item.title +'</span></h2><div class="img-div"><img id="'+ item.img +'" src="'+ item.img +'" alt="" height="333px" width="500px" /></div></div>';
});

$target = $('#question-header').append(newHtml);

Answer 6

尝试：

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"}
        ]
        function gen(myArray){
            var html = '<div id="line1">'
            for (var i = 0, i < myArray.length; i++){
                html += '<div class="item"><h2 id="item_text"><span>'+myArray[i].title+'</span></h2><div class="img-div"><img id="item_img" src="'+myArray[i].img+'" alt="" height="333px" width="500px" /></div></div>';
            }
            html += '</div>';
            return html;
        }

        var HTML = gen(array);
        $('#content').html(HTML);

使用jQuery添加div块元素

6 个答案: