HTML in string with JavaScript code, JS not working

Question

Here is my test javascript function

<script type="text/javascript">
    function test() {
        var sHTML = "<script type='text/javascript'> " +
                        "function showmsg() { " +
                            "alert('message'); " +
                        "} " +
                     "<\/script>" +
                     "<div>" +
                        "<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
                     "</div>";
        var divTemp = document.createElement("div");
        divTemp.innerHTML = sHTML;

        var d = document.getElementById("div1");
        d.appendChild(divTemp);
    }
</script>

When I run this function, the div along with a tag is added in the div1, but when I click on anchor tag, it says showmsg is not defined, which is indicating that browser is NOT parsing the script tag.

How to achieve this without any 3rd party library?

Update:

The possible usage is, I want to allow user to create HTML templates along with JavaScript code, then my JS library will use those HTML templates to render user defined markup, plus allowing user to implement his/her custom logics through JS.

David Hellsing · Accepted Answer · 2014-02-09 16:36:37Z

1

You need to run eval on the script contents when using innerHTML. Try something like:

var scripts = divTemp.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++) {
    eval(scripts[i].textContent);
}

Obviously, you need to do this in end, after injecting the innerHTML into the DOM.

edited Feb 9, 2014 at 16:36

answered Feb 9, 2014 at 16:27

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Hellsing Over a year ago

@sallushan Yes it is: jsbin.com/huqaz/1/edit?html,js,output (I changed to textContent for FF support)

sallushan Over a year ago

Yes, its working fine on jsbin, but when I ran it through my test web page in Chrome and IE, its NOT working. However if I run eval() in console, it creates the function.

sallushan Over a year ago

OK got it working, actually it was the context issue, I used it as, eval.call(window, scripts[i].textContent). Thanks.

Pointy · Accepted Answer · 2014-02-09 16:10:05Z

1

Browsers do not run JavaScript code when a <script> tag is dynamically inserted like that.

Instead of that, you can just define the function directly!

    function test() {
      window.showmsg = function() {
        alert("message");
      };

      var sHTML = "<div>" +
                    "<a href='#' onclick='javascript:showmsg(); return false;'>click</a>" +
                 "</div>";
    var divTemp = document.createElement("div");
    divTemp.innerHTML = sHTML;

    var d = document.getElementById("div1");
    d.appendChild(divTemp);
}

Libraries like jQuery have code to strip <script> blocks out of text that's being stuffed into some element's innerHTML, and then evaluate it with eval(), so that's one thing to do if the code is somehow "stuck" in a block of content.

answered Feb 9, 2014 at 16:10

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

sallushan Over a year ago

yes obviously, but the problem is I have this thing in string, so can't define the function

Pointy Over a year ago

@sallushan well if you could provide more context it might be possible to offer specific suggestions. As I said in my answer, some DOM manipulation libraries provide this service. If you don't want to use such a library, you can just steal code from one.

zeomega · Accepted Answer · 2014-02-09 16:20:35Z

0

Using jquery, is this can help you :

$('<script>function test(){alert("message");};</' + 'script><div><a href="#" onclick="test();">click</a></div>').appendTo(document.body)

http://jsfiddle.net/TSWsF/

answered Feb 9, 2014 at 16:20

zeomega

3552 gold badges6 silver badges18 bronze badges

1 Comment

sallushan Over a year ago

thanks zeomega, trying to avoid any 3rd party library

Collectives™ on Stack Overflow

HTML in string with JavaScript code, JS not working

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related