Inserting HTML elements with JavaScript

Question

Instead of tediously search for workarounds for each type of attribute and event when using the following syntax   elem   document createElement  div    elem id    myID   elem innerHTML     my Text   document body insertBefore elem document body childNodes 0      Is there a way where I can just declare the entire HTML element as a string  like   elem   document createElement   lt div id  myID  gt  my Text  lt  div gt     document body insertBefore elem document body childNodes 0

User · Answer

As others said the convenient jQuery prepend functionality can be emulated:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

While some say it is better not to "mess" with innerHTML, it is reliable in many use cases, if you know this:

If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Or:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTML is probably a good alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

User · Answer

In old school JavaScript  you could do this   document body innerHTML     lt p id  foo  gt Some HTML lt  p gt     document body innerHTML    In response to your comment            I was interested in declaring the source of a new element s attributes and events  not the innerHTML of an element    You need to inject the new HTML into the DOM  though  that s why innerHTML is used in the old school JavaScript example  The innerHTML of the BODY element is prepended with the new HTML  We re not really touching the existing HTML inside the BODY   I ll rewrite the abovementioned example to clarify this   var newElement     lt p id  foo  gt This is some dynamically added HTML  Yay  lt  p gt    var bodyElement   document body  bodyElement innerHTML   newElement   bodyElement innerHTML     note that    cannot be used here  this would result in  NaN    Using a JavaScript framework would make this code much less verbose and improve readability  For example  jQuery allows you to do the following      body   prepend   lt p id  foo  gt Some HTML lt  p gt

User · Answer

If you want to insert HTML code inside existing page s tag use Jnerator  This tool was created specially for this goal   Instead of writing next code      var htmlCode     lt ul class   menu-countries   gt  lt li         class   item   gt  lt img src   au png   gt  lt  img gt  lt span gt Australia  lt  span gt  lt  li gt  lt li         class   item   gt  lt img src   br png   gt   lt  img gt  lt span gt Brazil lt  span gt  lt  li gt  lt li         class   item   gt   lt img src   ca png   gt  lt  img gt  lt span gt Canada lt  span gt  lt  li gt  lt  ul gt        var element   document getElementById  myTag        element innerHTML   htmlCode    You can write more understandable structure      var jtag    j ul           class   menu-countries           child                 j li   class   item   child                     j img   src   au png                       j span   child   Australia                                   j li   class   item   child                     j img   src   br png                       j span   child   Brazil                                   j li   class   item   child                     j img   src   ca png                       j span   child   Canada                                           var htmlCode   jtag html        var element   document getElementById  myTag        element innerHTML   htmlCode

User · Answer

To my knowledge  which  to be fair  is fairly new and limited  the only potential issue with this technique is the fact that you are prevented from dynamically creating some table elements   I use a form to templating by adding  template  elements to a hidden DIV and then using cloneNode true  to create a clone and appending it as required  Bear in ind that you do need to ensure you re-assign id s as required to prevent duplication

User · Answer

Have a look at insertAdjacentHTML  var element   document getElementById  one    var newElement     lt div id  two  gt two lt  div gt   element insertAdjacentHTML   afterend   newElement      new DOM structure   lt div id  one  gt one lt  div gt  lt div id  two  gt two lt  div gt    position is the position relative to the element you are inserting adjacent to    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

User · Answer

You want this  document body insertAdjacentHTML   afterbegin     lt div id  myID  gt     lt  div gt

User · Answer

Instead of directly messing with innerHTML it might be better to create a fragment and then insert that   function create htmlStr        var frag   document createDocumentFragment            temp   document createElement  div        temp innerHTML   htmlStr      while  temp firstChild            frag appendChild temp firstChild             return frag     var fragment   create   lt div gt Hello  lt  div gt  lt p gt     lt  p gt        You can use native DOM methods to insert the fragment  document body insertBefore fragment  document body childNodes 0      Benefits    You can use native DOM methods for insertion such as insertBefore  appendChild etc  You have access to the actual DOM nodes before they re inserted  you can access the fragment s childNodes object  Using document fragments is very quick  faster than creating elements outside of the DOM and in certain situations faster than innerHTML      Even though innerHTML is used within the function  it s all happening outside of the DOM so it s much faster than you d think

[javascript] Inserting HTML elements with JavaScript

Examples related to javascript

Examples related to html