Executing elements inserted with .innerHTML

by

Simplified ES6 version of @joshcomley’s answer with an example.

No JQuery, No library, No eval, No DOM change, Just pure Javascript.

http://plnkr.co/edit/MMegiu?p=preview

var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

Usage

$0.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML($0, HTML); // does run <script> tags in HTML

More Related Contents:

  1. Difference between innerText, innerHTML and value?
  2. Advantages of createElement over innerHTML?
  3. Can scripts be inserted with innerHTML?
  4. nodeValue vs innerHTML and textContent. How to choose? [duplicate]
  5. JQuery html() vs. innerHTML
  6. It says that TypeError: document.getElementById(…) is null [duplicate]
  7. How can I tell if a DOM element is visible in the current viewport?
  8. How can I check if a scrollbar is visible?
  9. How to get a DOM Element from a jQuery selector?
  10. How do I check if an element is really visible with JavaScript? [duplicate]
  11. “innerHTML += …” vs “appendChild(txtNode)”
  12. Retrieving the text of the selected in element
  13. How can I add a class to a DOM element in JavaScript?
  14. How to get the HTML for a DOM element in javascript
  15. JavaScript DOMParser access innerHTML and other properties
  16. How to find a parent with a known class in jQuery?
  17. jQuery count child elements
  18. Adding images to an HTML document with JavaScript
  19. what does eval do and why its evil? [duplicate]
  20. Do I need to remove event listeners before removing elements?
  21. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  22. Override default behaviour for link (‘a’) objects in Javascript
  23. What is the difference between Window and window?
  24. cloning javascript event object
  25. What is the difference between Document and document in JavaScript?
  26. Retrieving value from with multiple option in React
  27. Alternative to DOMNodeInserted
  28. JavaScript: get the current executing node? [duplicate]
  29. Dynamically generated table – using an array to fill in TD values
  30. Why is iframe.contentWindow == null?

Leave a Comment