Javascript - Append HTML to container element without innerHTML

Question

I need a way to append HTML to a container element without using innerHTML  The reason why I do not want to use innerHTML is because when it is use like this   element innerHTML    htmldata  It works by replacing all of the html first before adding the old html plus the new html  This is not good because it resets dynamic media such as embedded flash videos     I could do it this way which works   var e   document createElement  span    e innerHTML   htmldata  element appendChild e     However the problem with that way is that there is that extra span tag in the document now which I do not want   How can this be done then  Thanks

User · Answer

This is what DocumentFragment was meant for   var frag   document createDocumentFragment    var span   document createElement  span    span innerHTML   htmldata  for  var i   0  ii   span childNodes length  i  lt  ii  i          frag appendChild span childNodes i      element appendChild frag     document createDocumentFragment   childNodes

User · Answer

To give an alternative  as using DocumentFragment does not seem to work   You can simulate it by iterating over the children of the newly generated node and only append those   var e   document createElement  div    e innerHTML   htmldata   while e firstChild        element appendChild e firstChild

User · Answer

I am surprised that none of the answers mentioned the insertAdjacentHTML   method   Check it out here   The first parameter is where you want the string appended and takes   quot beforebegin quot    quot afterbegin quot    quot beforeend quot    quot afterend quot     In the OP s situation you would use  quot beforeend quot    The second parameter is just the html string  Basic usage  var d1   document getElementById  one    d1 insertAdjacentHTML  beforeend     lt div id  quot two quot  gt two lt  div gt

User · Answer

lt div id  Result  gt   lt  div gt    lt script gt  for var i 0  i lt  10  i     var data     lt b gt vijay lt  b gt     document getElementById  Result   innerHTML    data     lt  script gt    assign the data for div with      symbol you can append data including previous html data

User · Answer

alnafie has a great answer for this question  I wanted to give an example of his code for reference     x000D   x000D  var childNumber   3  x000D   x000D  function addChild     x000D    var parent   document getElementById  i-want-more-children    x000D    var newChild     lt p gt Child     childNumber     lt  p gt    x000D    parent insertAdjacentHTML  beforeend   newChild   x000D    childNumber    x000D    x000D  body   x000D    text-align  center  x000D    x000D  button   x000D    background  rgba 7  99  53   1   x000D    border  3px solid rgba 7  99  53  1   x000D    border-radius  5px  x000D    color  rgba 7  99  53  1   x000D    cursor  pointer  x000D    line-height  40px  x000D    font-size  30px  x000D    outline  none  x000D    padding  0 20px  x000D    transition  all  3s  x000D    x000D  button hover   x000D    background  rgba 7  99  53  1   x000D    color  rgba 255 255 255 1   x000D    x000D  p   x000D    font-size  20px  x000D    font-weight  bold  x000D    x000D   lt button type  button  onclick  addChild    gt Append Child lt  button gt  x000D   lt div id  i-want-more-children  gt  x000D     lt p gt Child 1 lt  p gt  x000D     lt p gt Child 2 lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Hopefully this is helpful to others

User · Answer

How to fish and while using strict code  There are two prerequisite functions needed at the bottom of this post   xml add  before   id   element after      lt span xmlns  http   www w3 org 1999 xhtml  gt Some text  lt  span gt      xml add  after   id   element before      lt input type  text  xmlns  http   www w3 org 1999 xhtml    gt      xml add  inside   id   element parent      lt input type  text  xmlns  http   www w3 org 1999 xhtml    gt       Add multiple elements  namespace only needs to be on the parent element    xml add  inside   id   element parent      lt div xmlns  http   www w3 org 1999 xhtml  gt  lt input type  text    gt  lt input type  button    gt  lt  div gt       Dynamic reusable code   function id  id   return  document getElementById id     document getElementById id    false    function xml add pos  e  xml     e    typeof e     string   amp  amp  id  e     id  e    e    if  e nodeName       if  pos   after    e parentNode insertBefore document importNode new DOMParser   parseFromString xml  application xml   childNodes 0  true  e nextSibling      else if  pos   before    e parentNode insertBefore document importNode new DOMParser   parseFromString xml  application xml   childNodes 0  true  e      else if  pos   inside    e appendChild document importNode new DOMParser   parseFromString xml  application xml   childNodes 0  true       else if  pos   replace    e parentNode replaceChild document importNode new DOMParser   parseFromString xml  application xml   childNodes 0  true  e        Add fragment and have it returned

[javascript] Javascript - Append HTML to container element without innerHTML

Examples related to javascript

Examples related to html

Examples related to innerhtml