CODEWITHSUNDEEP
javascripthtmlnewlineappendchild
Jason Mayoff
Jason Mayoff

Reputation: 77

Insert newline into source after appendChild()

I'm creating a div using 

document.getElementById("vidContainer").appendChild(divNode);

This creates a div inside vidContainer and because it's in a loop it creates several of these <div>s. Everything displays on the page the way I want it to, perfectly.

My problem is that I want my source to look nice, too. I can insert \n wherever I want in the innerHTML and that breaks things up nicely, but the closing div tag and opening div tag of the new one run together on the same line. 

</div><div class="jkh">

I'm looking for a way to insert a \n between the </div> and the <div class="jkh">

Is there any way to have the appendChild() do this or is there any other way to insert that \n immediately after the end of one and beginning of another div?

Upvotes: 2

Views: 4490

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

Consoles in browsers usually will insert new lines automatically.

enter image description here

　　　　　　　　　Chrome　　　　　　　　　　　　　　　Firefox (with Firebug)

However, if you really want to add new lines manually, you will have to do this, which is not recommended:

var nodes = "<div>abc</div>\n\
<div>def</div>";

document.body.innerHTML = nodes;

//-or-

document.body.appendChild(document.createTextNode("\n"));

http://jsfiddle.net/DerekL/yL2c6/

Why you shouldn't add new lines manually

  • It makes your script runs slower
  • Not necessary
  • Might mess up DOM

Upvotes: 1

Related Questions