Print text on HTML from JavaScript

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.

Please, create a snippet or a jsfiddle

P.S.
– P.S.

2017-11-25 00:18:11 +00:00
Commented Nov 25, 2017 at 0:18 — P.S.
– P.S., Commented Nov 25, 2017 at 0:18

Nicolas M. Pardo · Accepted Answer · 2017-11-25 00:28:04Z

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

answered Nov 25, 2017 at 0:28

Nicolas M. Pardo

7621 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jak.b · Accepted Answer · 2017-11-25 00:48:18Z

1

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>

answered Nov 25, 2017 at 0:48

jak.b

2834 silver badges17 bronze badges

Comments

Mamun · Accepted Answer · 2017-11-25 01:10:23Z

1

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>

answered Nov 25, 2017 at 1:10

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Print text on HTML from JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related