What is the correct way to write HTML using Javascript

Question

It seems that experienced web developers frown upon using document write   in JavaScript when writing dynamic HTML  Why is this  and what is the correct way

User · Answer

You can change the innerHTML or outerHTML of an element on the page instead

User · Answer

There are many ways to write html with JavaScript   document write is only useful when you want to write to page before it has actually loaded  If you use document write   after the page has loaded  at onload event  it will create new page and overwrite the old content  Also it doesn t work with XML  that includes XHTML   From other hand other methods can t be used before DOM has been created  page loaded   because they work directly with DOM   These methods are    node innerHTML    Whatever   document createElement  div    and node appendChild    etc     In most cases node innerHTML is better since it s faster then DOM functions  Most of the time it also make code more readable and smaller

User · Answer

element InnerHtml  allmycontent  will re-write everything inside the element  You must use a variable let allmycontent  this is what I want to print inside this element to store the whole content you want inside this element  If not each time you will call this function  the content of your element will be erased and replace with the last call you made of it   document write    can be use several times  each time the content will be printed where the call is made on the page   But be aware  document write   method is only useful for inserting content at page creation   So use it for not repeating when having a lot of data to write like a catalogue of products or images   Here a simple example  all your li for your aside menu are stored in an array  tab   you can create a js script with the script tag directly into the html page and then use the write method in an iterative function where you want to insert those li on the page     lt script type  text javascript  gt  document write   lt ul gt     for  var i 0  i lt  tab length  i         document write tab i         document write   lt  ul gt      lt  script gt     This works because Js is interpreted in a linear way during the loading  So make sure your script is at the right place in your html page You can also use an external Js file  but then again you must declare it at the place where you want it to be interpreted   For this reason  document write cannot be called for writing something on your page as a result of a  user interaction   like click or hover   because then the DOM has been created and write method will  like said above  write a new page  purge the actual execution stack and start a new stack and a new DOM tree   In this case use    element innerHTML   Myfullcontent      To learn more about document s methods  open your console  document  then open    proto    HTMLDocumentPrototype  You ll see the function property  write  in the document object  You can also use document writeln which add a new line at each statement  To learn more about a function method  just write its name into the console with no parenthesis  document write  The console will return a description instead of calling it

User · Answer

Perhaps a good idea is to use jQuery in this case  It provides handy functionality and you can do things like this      div   html   lt b gt Test lt  b gt       Take a look at http   docs jquery com Attributes html val for more information

User · Answer

Use jquery  look how easy it is       var a     lt h1 gt  this is some html  lt  h1 gt            results   html a             html      lt div id  results  gt   lt  div gt

User · Answer

I think you should use  instead of document write  DOM JavaScript API like document createElement   createTextNode   appendChild and similar  Safe and almost cross browser   ihunger s outerHTML is not cross browser  it s IE only

User · Answer

document write   doesn t work with XHTML  It s executed after the page has finished loading and does nothing more than write out a string of HTML    Since the actual in-memory representation of HTML is the DOM  the best way to update a given page is to manipulate the DOM directly   The way you d go about doing this would be to programmatically create your nodes and then attach them to an existing place in the DOM  For  purposes of a contrived  example  assuming that I ve got a div element maintaining an ID attribute of  header   then I could introduce some dynamic text by doing this      create my text var sHeader   document createTextNode  Hello world         create an element for the text and append it var spanHeader   document createElement  span    spanHeader appendChild sHeader       grab a reference to the div header var divHeader   document getElementById  header        append the new element to the header divHeader appendChild spanHeader

User · Answer

The document write method is very limited  You can only use it before the page has finished loading  You can t use it to update the contents of a loaded page   What you probably want is innerHTML

User · Answer

I m not particularly great at JavaScript or its best practices  but document write   along with innerHtml   basically allows you to write out strings that may or may not be valid HTML  it s just characters  By using the DOM  you ensure proper  standards-compliant HTML that will keep your page from breaking via plainly bad HTML   And  as Tom mentioned  JavaScript is done after the page is loaded  it d probably be a better practice to have the initial setup for your page to be done via standard HTML  via  html files  or whatever your server does  i e  php

User · Answer

document write   will only work while the page is being originally parsed and the DOM is being created  Once the browser gets to the closing  lt  body gt  tag and the DOM is ready  you can t use document write   anymore   I wouldn t say using document write   is correct or incorrect  it just depends on your situation  In some cases you just need to have document write   to accomplish the task  Look at how Google analytics gets injected into most websites   After DOM ready  you have two ways to insert dynamic HTML  assuming we are going to insert new HTML into  lt div id  node-id  gt  lt  div gt      Using innerHTML on a node   var node   document getElementById  node-id    node innerHTML   lt p gt some dynamic html lt  p gt      Using DOM methods   var node   document getElementById  node-id    var newNode   document createElement  p    newNode appendChild document createTextNode  some dynamic html     node appendChild newNode      Using the DOM API methods might be the purist way to do stuff  but innerHTML has been proven to be much faster and is used under the hood in JavaScript libraries such as jQuery   Note  The  lt script gt  will have to be inside your  lt body gt  tag for this to work

User · Answer

Surely the best way is to avoid doing any heavy HTML creation in your JavaScript at all  The markup sent down from the server ought to contain the bulk of it  which you can then manipulate  using CSS rather than brute force removing replacing elements  if at all possible   This doesn t apply if you re doing something  clever  like emulating a widget system

User · Answer

DOM methods  as outlined by Tom  innerHTML  as mentioned by iHunger    DOM methods are highly preferable to strings for setting attributes and content  If you ever find yourself writing innerHTML    lt a href    path    gt   text   lt  a gt   you re actually creating new cross-site-scripting security holes on the client side  which is a bit sad if you ve spent any time securing your server-side   DOM methods are traditionally described as    slow    compared to innerHTML  But this isn t really the whole story  What is slow is inserting a lot of child nodes    for  var i  0  i lt 1000  i         div parentNode insertBefore document createElement  div    div     This translates to a load of work for the DOM finding the right place in its nodelist to insert the element  moving the other child nodes up  inserting the new node  updating the pointers  and so on   Setting an existing attribute s value  or a text node s data  on the other hand  is very fast  you just change a string pointer and that s it  This is going to be much faster than serialising the parent with innerHTML  changing it  and parsing it back in  and won t lose your unserialisable data like event handlers  JS references and form values    There are techniques to do DOM manipulations without so much slow childNodes walking  In particular  be aware of the possibilities of cloneNode  and using DocumentFragment  But sometimes innerHTML really is quicker  You can still get the best of both worlds by using innerHTML to write your basic structure with placeholders for attribute values and text content  which you then fill in afterwards using DOM  This saves you having to write your own escapehtml   function to get around the escaping security problems mentioned above

[javascript] What is the correct way to write HTML using Javascript?

Examples related to javascript

Examples related to html

Examples related to dynamic

Examples related to code-generation

Examples related to document.write