Question

在一个函数中，我有一个循环，使用createElement（）;创建10个图像。在另一个函数中，我有另一个循环，其中包含我需要在每张图片后添加文本的信息，但我的代码在所有10张图片的末尾添加它我需要它们在每张相应的图片之后。这是显示文本的函数：

function displayAlbum(json){
  for (var x = 0; x<json.length;x++){
  var span1 = document.createElement("span");

  span1.innerText = json[x].album;
  console.log(json[x].album);
  var display = document.getElementById("results");
  display.appendChild(span1);
  }
}

我无法单独设置每个图像的ID，因为我在js中创建了它们。感谢提前帮助，请不要jquery

  for (var x = 0; x<json.length;x++){
  var image = document.createElement("img");
  image.id = "picture";
  image.width = 100;
  image.height = 100;
  image.src = json[x].cover;
  var display = document.getElementById("results");
  display.appendChild(image);

  var a = document.getElementById("artist");
  var y = document.getElementById("year");
  var artist = document.getElementById("artist").selectedIndex;//index of value of the switch statement
  var year = document.getElementById("year").selectedIndex;//index of value of the switch statement
  var realYear = y[year].text;//Value of the selected text
  var realArtist = a[artist].text;//Value of the selected text
  var display = document.getElementById("Results");
  }

这是我的第二个循环。我想在每张照片之后出现displayalbum。由于代码中的其他复杂性，我无法将它们组合起来

Answer 1

尝试做类似的事情：plunker

function displayAlbum(){
  for (var x = 0; x < 10 ; x++){ // change to json.length
  var span1 = document.createElement("span");

  span1.innerText = 'json[x].album';
  span1.id = 'span'+x;

  var display = document.getElementById("results");
  display.appendChild(span1);

  }
}

Answer 2

你可以通过单循环和使用Figure和FigCaption元素实现你的目标，专门为这种显示图像创建及其描述

<div id="results">
  </div>

{{1}}

Answer 3

您要创建图片的循环，为image.id = "picture" + x;

等图片提供唯一ID

然后更改displayAlbum（）函数以使用相应的图像放置span标记。

function displayAlbum(json){
  for (var x = 0; x<json.length;x++){
    var span1 = document.createElement("span");
    span1.innerText = json[x].album;
    console.log(json[x].album);

    var display = document.getElementById("results");
    var img = document.getElementById("picture" + x); // use unique id of img to access it
    if(img.nextSibling) { // if img is not the last node in 'results'
      display.insertBefore(span1, img.nextSibling);
    } else { // if img is the last node in 'results'
      display.appendChild(span1);
    }
  }
}

使用javascript在特定图像后插入文本

3 个答案: