CODEWITHSUNDEEP
javascripthtml
P_Ferreira
P_Ferreira

Reputation: 473

Print text on HTML from JavaScript

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.

Upvotes: 1

Views: 16196

Answers (3)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

jak.b
jak.b

Reputation: 283

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>

Upvotes: 1

Nicolas M. Pardo
Nicolas M. Pardo

Reputation: 762

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

Upvotes: 1

Related Questions