Is it possible to append to innerHTML without destroying descendants event listeners

Question

In the following example code  I attach an onclick event handler to the span containing the text  foo   The handler is an anonymous function that pops up an alert     However  if I assign to the parent node s innerHTML  this onclick event handler gets destroyed - clicking  foo  fails to pop up the alert box   Is this fixable    lt html gt    lt head gt    lt script type  text javascript  gt     function start          myspan   document getElementById  myspan        myspan onclick   function     alert   hi            mydiv   document getElementById  mydiv        mydiv innerHTML     bar          lt  script gt    lt  head gt     lt body onload  start    gt      lt div id  mydiv  style  border  solid red 2px  gt        lt span id  myspan  gt foo lt  span gt      lt  div gt    lt  body gt    lt  html gt

User · Answer

There is another alternative  using setAttribute rather than adding an event listener  Like this     x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt title gt Demo innerHTML and event listeners lt  title gt  x000D   lt style gt  x000D      div   x000D          border  1px solid black  x000D          padding  10px  x000D        x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div gt  x000D           lt span gt Click here  lt  span gt  x000D       lt  div gt  x000D       lt script gt  x000D          document querySelector  span   setAttribute  onclick   alert  Hi       x000D          document querySelector  div   innerHTML      Added text    x000D       lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Using  insertAdjacentHTML   preserves event listeners  and is supported by all major browsers  It s a simple one-line replacement for  innerHTML   var html to insert     lt p gt New paragraph lt  p gt        with  innerHTML  destroys event listeners document getElementById  mydiv   innerHTML    html to insert      with  insertAdjacentHTML  preserves event listeners document getElementById  mydiv   insertAdjacentHTML  beforeend   html to insert     The  beforeend  argument specifies where in the element to insert the HTML content  Options are  beforebegin    afterbegin    beforeend   and  afterend   Their corresponding locations are    lt  -- beforebegin -- gt   lt div id  mydiv  gt     lt  -- afterbegin -- gt     lt p gt Existing content in  mydiv lt  p gt     lt  -- beforeend -- gt   lt  div gt   lt  -- afterend -- gt

User · Answer

You could do it like this   var anchors   document getElementsByTagName  a     var index a   0  var uls   document getElementsByTagName  UL     window onload function             alert anchors length     for var i 0   i lt uls length   i          lis   uls i  getElementsByTagName  LI        for var j 0  j lt lis length j                  var first   lis j  innerHTML           string     lt img src   http   g etfv co      anchors index a                        width   32            height   32     gt        first          lis j  innerHTML   string

User · Answer

Unfortunately  assignment to innerHTML causes the destruction of all child elements  even if you re trying to append   If you want to preserve child nodes  and their event handlers   you ll need to use DOM functions   function start         var myspan   document getElementById  myspan        myspan onclick   function     alert   hi            var mydiv   document getElementById  mydiv        mydiv appendChild document createTextNode  bar         Edit  Bob s solution  from the comments   Post your answer  Bob  Get credit for it   -   function start         var myspan   document getElementById  myspan        myspan onclick   function     alert   hi            var mydiv   document getElementById  mydiv        var newcontent   document createElement  div        newcontent innerHTML    bar        while  newcontent firstChild            mydiv appendChild newcontent firstChild

User · Answer

something innerHTML     add whatever you want    it worked for me  I added a button to an input text using this solution

User · Answer

Yes it is possible if you bind events using tag attribute onclick  sayHi    directly in template similar like your  lt body onload  start    gt  - this approach similar to frameworks angular vue react etc  You can also use  lt template gt  to operate on  dynamic  html like here  It is not strict unobtrusive js however it is acceptable for small projects   x000D   x000D  function start     x000D    mydiv innerHTML     bar   x000D    x000D   x000D  function sayHi     x000D    alert  hi    x000D    x000D   lt body onload  start    gt  x000D     lt div id  mydiv  style  border  solid red 2px  gt  x000D       lt span id  myspan  onclick  sayHi    gt foo lt  span gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

I created my markup to insert as a string since it s less code and easier to read than working with the fancy dom stuff   Then I made it innerHTML of a temporary element just so I could take the one and only child of that element and attach to the body   var html     lt div gt    html     Hello div    html      lt  div gt     var tempElement   document createElement  div    tempElement innerHTML   html  document getElementsByTagName  body   0  appendChild tempElement firstChild

User · Answer

For any object array with header and data jsfiddle  https   jsfiddle net AmrendraKumar 9ac75Lg0 2    lt table id  myTable  border  1 1  gt  lt  table gt    lt script gt    const userObjectArray          name   Ajay       age  27      height  5 10      address   Bangalore             name   Vijay       age  24      height  5 10      address   Bangalore             name   Dinesh       age  27      height  5 10      address   Bangalore          const headers   Object keys userObjectArray 0      var tr1   document createElement  tr      var htmlHeaderStr         for  let i   0  i  lt  headers length  i          htmlHeaderStr      lt th gt     headers i      lt  th gt         tr1 innerHTML   htmlHeaderStr    document getElementById  myTable   appendChild tr1      for  var j   0  j  lt  userObjectArray length  j          var tr   document createElement  tr        var htmlDataString           for  var k   0  k  lt  headers length  k            htmlDataString      lt td gt     userObjectArray j  headers k       lt  td gt             tr innerHTML   htmlDataString      document getElementById  myTable   appendChild tr         lt  script gt

User · Answer

I m a lazy programmer  I don t use DOM because it seems like extra typing  To me  the less code the better  Here s how I would add  bar  without replacing  foo    function start    var innermyspan   document getElementById  myspan   innerHTML  document getElementById  myspan   innerHTML innermyspan  bar

User · Answer

As a slight  but related  asside  if you use a javascript library such as jquery  v1 3  to do your dom manipulation you can make use of live events whereby you set up a handler like         myspan   live  click   function      alert  hi          and it will be applied to that selector at all times during any kind of jquery manipulation   For live events see  docs jquery com events live for jquery manipulation see  docs jquery com manipulation

User · Answer

Losing event handlers is  IMO  a bug in the way Javascript handles the DOM  To avoid this behavior  you can add the following   function start        myspan   document getElementById  myspan      myspan onclick   function     alert   hi          mydiv   document getElementById  mydiv      clickHandler   mydiv onclick      add   mydiv innerHTML     bar     mydiv onclick   clickHandler      add

User · Answer

The easiest way is to use an array and push elements into it and then insert the array subsequent values into the array dynamically  Here is my code   var namesArray        function myclick        var readhere   prompt   Insert value        namesArray push readhere       document getElementById  demo   innerHTML  namesArray

User · Answer

Now  it is 2012  and jQuery has append and prepend functions that do exactly this  add content without effecting current content  Very useful

[javascript] Is it possible to append to innerHTML without destroying descendants' event listeners?

Examples related to javascript

Examples related to html

Examples related to innerhtml

Examples related to dom-events