Question

我已经从我想要打印的API响应中识别出两条信息：data.points_of_interest [i] .main_image（和）data.points_of_interest [i] .title。我可以单独打印出来，如下面的代码所示;

var src = data.points_of_interest[i].main_image; // URL of the image
    var bodystuff = document.createElement('img');
    bodystuff.src=src;
    document.getElementById('outputs').appendChild(bodystuff);
    console.log(Image);
var name = data.points_of_interest[i].title;
    var bodystuff = document.createElement('p')
    bodystuff.innerHTML = name  
    document.getElementById('outputs').appendChild(bodystuff)
    console.log(name)

这是我的HTML;

<section  class="wrap" id="outputs"> 

</section>

我试图在一个实例中打印它们，并尝试了src.appendchild（name）和其他组合，但是在所有指针上都没有成功？

Answer 1

有很多方法可以做你想要的。一种方法是按照您希望的方式构建所有元素，并根据需要附加子元素。

https://jsfiddle.net/8154e4d1/

var outputSection = document.getElementById('outputs');
data.points_of_interest.forEach(function (poi) {
  var img = document.createElement('img')
  img.src = poi.main_image;

  var p = document.createElement('p');
  p.textContent = poi.title;
  p.appendChild(img);

  outputSection.appendChild(p);
});

在此示例中，我们首先创建image元素，并将其src设置为图像URL。然后我们创建了包含文本和图像的段落元素。接下来，我们将图像附加到此段落。最后，我们将整个段落附加到外部。

如果您发现自己做了很多这样的事情，可以考虑切换到JavaScript模板引擎，例如Swig。（还有很多其他人可以选择。）

如果你决定使用jQuery，这里有一个更简单的版本：

https://jsfiddle.net/eemcpmys/1/

$('#outputs').append(
  data.points_of_interest.map(function (poi) {
    return $('<p>').append([
      poi.title,
      $('<img>').attr('src', poi.main_image)
    ]);
  })
);

如何一次打印出两个API结果

1 个答案: