Question

我有这个for循环

<script>
...
for(i = 0;i < json.length;i++){      
  document.getElementById("pText").innerHTML = json[i].name;
  document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
</script>

我想在每个循环上打印一个带有href的段落，所以我这样做了：

</script>

<a id="pLink">
   <p id="pText">
   </p>
</a>

它可以工作，但事情是这只打印最后一个循环。所以我在剧本中尝试了这个

document.write("<a href=\"" + json[i].html_url + "\">");
document.write("<p>" + json[i].name + "</p>");
document.write("</a>");

而不是：

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);

它打印我想要的一切，但它取代了整个页面。我怎样才能做到这一点？我需要为每个循环创建一个id吗？与"pText1, pText2, etc.

一样

Answer 1

为该循环创建一个容器元素，并按照您的想法添加html

<div id="container"></div>

然后在javascript中

var container = document.getElementById('container');
var my_html = '';
for(var i = 0;i < json.length;i++){  
  my_html += '<a href="' + json[i].html_url + '\">';
  my_html += '<p>'+  json[i].name + '</p>'
  my_html += '</a>'
}
container.innerHTML = my_html;

我们在这里做的是根据需要将内容添加到字符串中，然后将其添加到容器中，以便它已经具有所有循环

Answer 2

document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);

如果你想使用这段代码，你必须写＆＃34; + =＆＃34;而不是＆＃34; =＆＃34;。

＆＃13;

var json = [
  {"name":"Name 1", "html_url": "http://www.example.com"},
  {"name":"Name 2", "html_url": "http://www.example.com"},
  {"name":"Name 3", "html_url": "http://www.example.com"}
];
for(var i = 0; i < json.length; i++){
  document.getElementById("pText").innerHTML += json[i].name + "<br>";
  document.getElementById("pLink").setAttribute("href",json[i].html_url);
}

＆＃13;

<a id="pLink">
   <p id="pText">
   </p>
</a>

＆＃13;

Answer 3

我会按以下方式进行：

let json = [{'name':'Google','html_url':'https://www.google.com/'}, {'name':'Facebook','html_url':'https://www.facebook.com/'}, {'name':'Twitter','html_url':'https://twitter.com/?lang=en'}];

let item = document.querySelector(".pLink")
for(let j = 1; j<json.length; j++){
	let cln = item.cloneNode(true);
	document.body.appendChild(cln);
}

let aTag = document.querySelectorAll('a.pLink');
aTag.forEach(function(item, i){
	let a = item.setAttribute("href",json[i].html_url);
	let p = item.querySelector('.pText');
	p.innerHTML = json[i].name;

})

<a class="pLink">
   <p class="pText">
   </p>
</a>

从JavaScript打印HTML上的文本

3 个答案: