What are alternatives to document write

Question

In tutorials I ve learnt to use document write  Now I understand that by many this is frowned upon  I ve tried print    but then it literally sends it to the printer   So what are alternatives I should use  and why shouldn t I use document write  Both w3schools and MDN use document write

User · Answer

You can combine insertAdjacentHTML method and document.currentScript property.

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position:

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

The document.currentScript property returns the <script> element whose script is currently being processed. Best position will be beforebegin — new HTML will be inserted before <script> itself. To match document.write's native behavior, one would position the text afterend, but then the nodes from consecutive calls to the function aren't placed in the same order as you called them (like document.write does), but in reverse. The order in which your HTML appears is probably more important than where they're place relative to the <script> tag, hence the use of beforebegin.

_x000D_

document.currentScript.insertAdjacentHTML(
  'beforebegin', 
  'This is a document.write alternative'
)

_x000D_

User · Answer

Just dropping a note here to say that  although using document write is highly frowned upon due to performance concerns  synchronous DOM injection and evaluation   there is also no actual 1 1 alternative if you are using document write to inject script tags on demand   There are a lot of great ways to avoid having to do this  e g  script loaders like RequireJS that manage your dependency chains  but they are more invasive and so are best used throughout the site application

User · Answer

Here is code that should replace document write in-place   document write function s       var scripts   document getElementsByTagName  script        var lastScript   scripts scripts length-1       lastScript insertAdjacentHTML  beforebegin   s

User · Answer

The question depends on what you are actually trying to do   Usually  instead of doing document write you can use someElement innerHTML or better  document createElement with an someElement appendChild   You can also consider using a library like jQuery and using the modification functions in there  http   api jquery com category manipulation

User · Answer

The reason that your HTML is replaced is because of an evil JavaScript function  document write     It is most definitely  bad form   It only works with webpages if you use it on the page load  and if you use it during runtime  it will replace your entire document with the input  And if you re applying it as strict XHTML structure it s not even valid code     the problem      document write writes to the document stream   Calling document write on a closed  or loaded  document automatically calls document open which will clear the document    -- quote from the MDN  document write   has two henchmen  document open    and document close     When the HTML document is loading  the document is  open    When the document has finished loading  the document has  closed   Using document write   at this point will erase your entire  closed  HTML document and replace it with a new  open  document   This means your webpage has erased itself and started writing a new page - from scratch   I believe document write   causes the browser to have a performance decrease as well  correct me if I am wrong      an example   This example writes output to the HTML document after the page has loaded   Watch document write   s evil powers clear the entire document when you press the  exterminate  button    x000D   x000D  I am an ordinary HTML page   I am innocent  and purely for informational purposes  Please do not  lt input type  button  onclick  document write  This HTML page has been succesfully exterminated     value  exterminate   gt  x000D  me  x000D   x000D   x000D      the alternatives     innerHTML  This is a wonderful alternative  but this attribute has to be attached to the element where you want to put the text      Example  document getElementById  output1   innerHTML    Some text       createTextNode   is the alternative recommended by the W3C      Example  var para   document createElement  p    para appendChild document createTextNode  Hello        NOTE   This is known to have some performance decreases  slower than  innerHTML    I recommend using  innerHTML instead     the example with the  innerHTML alternative    x000D   x000D  I am an ordinary HTML page   x000D  I am innocent  and purely for informational purposes   x000D  Please do not  x000D   lt input type  button  onclick  document getElementById  output1   innerHTML    There was an error exterminating this page  Please replace  lt code gt  innerHTML lt  code gt  with  lt code gt document write   lt  code gt  to complete extermination     value  exterminate   gt  x000D   me  x000D   lt p id  output1  gt  lt  p gt  x000D   x000D   x000D

User · Answer

This is probably the most correct  direct replacement  insertAdjacentHTML

User · Answer

I fail to see the problem with document write  If you are using it before the onload event fires  as you presumably are  to build elements from structured data for instance  it is the appropriate tool to use  There is no performance advantage to using insertAdjacentHTML or explicitly adding nodes to the DOM after it has been built  I just tested it three different ways with an old script I once used to schedule incoming modem calls for a 24 7 service on a bank of 4 modems    By the time it is finished this script creates over 3000 DOM nodes  mostly table cells  On a 7 year old PC running Firefox on Vista  this little exercise takes less than 2 seconds using document write from a local 12kb source file and three 1px GIFs which are re-used about 2000 times  The page just pops into existence fully formed  ready to handle events   Using insertAdjacentHTML is not a direct substitute as the browser closes tags which the script requires remain open  and takes twice as long to ultimately create a mangled page  Writing all the pieces to a string and then passing it to insertAdjacentHTML takes even longer  but at least you get the page as designed  Other options  like manually re-building the DOM one node at a time  are so ridiculous that I m not even going there    Sometimes document write is the thing to use  The fact that it is one of the oldest methods in JavaScript is not a point against it  but a point in its favor - it is highly optimized code which does exactly what it was intended to do and has been doing since its inception    It s nice to know that there are alternative post-load methods available  but it must be understood that these are intended for a different purpose entirely  namely modifying the DOM after it has been created and memory allocated to it  It is inherently more resource-intensive to use these methods if your script is intended to write the HTML from which the browser creates the DOM in the first place    Just write it and let the browser and interpreter do the work  That s what they are there for   PS  I just tested using an onload param in the body tag and even at this point the document is still open and document write   functions as intended  Also  there is no perceivable performance difference between the various methods in the latest version of Firefox  Of course there is a ton of caching probably going on somewhere in the hardware software stack  but that s the point really - let the machine do the work  It may make a difference on a cheap smartphone though  Cheers

User · Answer

As a recommended alternative to document write you could use DOM manipulation to directly query and add node elements to the DOM

User · Answer

Try to use getElementById   or getElementsByName   to access a specific element and then to use innerHTML property    lt html gt       lt body gt           lt div id  myDiv1  gt  lt  div gt           lt div id  myDiv2  gt  lt  div gt       lt  body gt        lt script type  text javascript  gt          var myDiv1   document getElementById  myDiv1            var myDiv2   document getElementById  myDiv2             myDiv1 innerHTML     lt b gt Content of 1st DIV lt  b gt            myDiv2 innerHTML     lt i gt Content of second DIV element lt  i gt         lt  script gt   lt  html gt

User · Answer

I m not sure if this will work exactly  but I thought of  var docwrite   function doc                       document write doc                  This solved the problem with the error messages for me

[javascript] What are alternatives to document.write?

Examples related to javascript

Examples related to document.write