Javascript 使用jQuery添加div bloc元素

我有一个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="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>

测试1
测试2
测试3

---

我如何在

Javascript

/

JQuery

中做到这一点？

这就是您要寻找的

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

//append content to myNewD

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

var myNewDiv=$（“”）；
//将内容附加到myNewD
myNewDiv.appendTo（$（“#内容”））

document.getElementById（“line1”）.innerHTML+=”；
对于（变量i=0；i<3；i++）{
document.getElementById（“line1”）.innerHTML+=“”+array[i]。title+“”
document.getElementById（“line1”）.innerHTML+=“”；
}
document.getElementById（“line1”）.innerHTML+=“”；

---

。希望对你有所帮助。

有一个；在你的阵列中，它应该是一个

使用以下命令：

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;

var arrayLength=array.length；
var insertHTML=“”；
对于（变量i=0；i

试试这个

创建一个存储要填充的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);
 }

var line=$（“#line 1”）；
for（数组中的一个）{
模型（a）；
}
函数模型（num）{
变量模型=''+数组[num]。标题+
'';
行。追加（模型）；
}

您可以使用

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

var数组=[
{标题：“TEST1”，img:http://www.myTest1.com/test1.jpg"},
{标题：“测试2”，img:http://www.myTest2.com/test2.jpg"},
{标题：“TEST3”，img:http://www.myTest3.com/test3.jpg"}
];
/*
*将目标div选择器放在这里
*我只是简单地玩了一下这个页面元素
*/
var newHtml=''；
$（数组）。每个（函数（索引，项）{
newHtml+=''+item.title+''；
});
$target=$（“#问题标题”）.append（newHtml）；

试试：

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

var数组=[
{标题：“TEST1”，img:http://www.myTest1.com/test1.jpg"},
{标题：“测试2”，img:http://www.myTest2.com/test2.jpg"},
{标题：“TEST3”，img:http://www.myTest3.com/test3.jpg"}
]
函数生成器（myArray）{
var html=''
对于（var i=0，i

我已经编辑了我的帖子，谢谢。你希望结果是什么？我不太明白您的问题。@wawanopoulos这是一个非常基本的问题，告诉我们您尝试了什么，我们会帮助您。我想从数据数组中动态创建全局div元素“line1”，并将创建的元素添加到现有元素“div id=”content中更改循环函数参数位置可能重复：

array.forEach（函数（项，索引）{}

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