Question

我有一个带有items类别的json文件，该文件列出了当前通过数组列出的项目。该项目列表每隔几个小时更新一次。

例如：

{
"items": [
    {
     "name": "Blueberry",
     "img": "website.com/blueberry.png"
    },
    {
     "name": "Raspberry",
     "img": "website.com/raspberry.png"
    }
         ]
}

为数组中的每个项目提供图像和说明。我要做的是为每个项目创建一个<img src='(item image url)'>元素，用于该项目内列出的图像，为每个项目创建一个<p>元素，用于列出的说明。

Answer 1

您可以使用带有for循环的JQuery实现此目的，并使用JQuery函数$(...)（教程here）动态创建元素

最后，您可能最终会得到这样的东西：

// fetch the items from the url
$.getJSON("your url").then(function(response){

  //cycle through all the items in the array
  for(var i = 0; i < response.items.length; i++){

    // create image
    var image = $('<img>').attr("src", response.items[i].img);
    // make sure to set the attribute using the "attr" function 
    //  to avoid Cross Site Scripting (see the link below)

    // create text element
    var text = $('<p>').text(response.items[i].name);

    // append the items to the container
    $("container element").append(image).append(text);
   }
});

About Cross Site Scripting

Answer 2

要在Pure JavaScript中动态创建元素，可以使用document.createElement


var imagesContainer = document.createElement('div')

for(var i = 0; i < array.length; i++){

    var img = document.createElement('img'),
        p = document.createElement('p');

    img.setAttribute("src", array[i].img);

    p.appendChild(document.createTextNode(array[i].name));

    imagesContainer.appendChild(img);
    imagesContainer.appendChild(p);
}

我认为这是您正在寻找的：）

使用jQuery创建基于整数的一定数量的元素

2 个答案: