从JavaScript打印HTML上的文本

Question

I have this for loop

<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>

I want to print a paragraph with a href on each loop, so i did this:

</script>

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

It works but the thing is this only prints the last loop. So i tried this inside the script

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

instead of this:

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

And it prints everything i want but it replaces the whole page. How can i do this? Do i need to create an id for every loop? Like "pText1, pText2, etc.

Answer 1

Create a container element for that loop, and add the html as you had in mind

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

Then in 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;

What we are doing here is adding the content to a string as many times as needed and then add it to the container so it already has all the loops

Answer 2

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

If you want to use your this code, you have to write "+=" instead of the "=".

 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); } 

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

Answer 3

I will do it in the following way:

 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>