使用javascript在某个图像之后插入文本答案

【问题标题】：Inserting text after a certain image using javascript使用javascript在某个图像之后插入文本
【发布时间】：2017-04-10 10:14:00
【问题描述】：

在一个函数中，我有一个使用 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。由于代码中的其他复杂性，我无法将它们组合起来

【问题讨论】：

为什么不把 2 个循环变成 1 个循环？另外，请显示您现在拥有的两个循环。
那么你为什么不能把 2 个循环变成 1 个呢？
我有调用每个函数的 if 语句，我给它们一个值，但是当我一个接一个地调用它们时，值会发生变化。所以我必须将它们展开并加载第一个函数，调用第二个函数，并将相同的变量分配给不同的值
我试图弄清楚如何在没有 id 的情况下在屏幕上获取每个图像，因为我在循环中使用 create 元素添加了图像，并在每个图像之后显示与每个图像对应的文本
我想通了！

标签： javascript html arrays json loops

【解决方案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);

  }
}

【讨论】：

【解决方案2】：

您可以通过单循环并使用 Figure 和 FigCaption 元素来实现您的目标，这些元素是专门为这种带有描述的显示图像创建的

var json = [{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test1"},{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test2"}];



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

  }

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

【讨论】：

【解决方案3】：

您在其中创建图像的循环，为图像提供一个唯一的 id，例如 image.id = "picture" + x;

然后修改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);
    }
  }
}

【讨论】：