Jquery 'html' function Vanilla JS without jQuery

Question

I have a jQuery function that I want to create with basic javascript (Vanilla) and am having troubles.

<html>
    <head>
        <title></title>
        <style>#cube1{margin-top:35px;width:305px;height:255px;border:1px solid;}</style>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        <script>
            function create(){
                var ad  = "<scr"+"ipt type='text/javascript'>";
                ad += "alert('boom');";
                ad += "</scr"+"ipt>";
                $('#cube1').html(ad);
            }
        </script>
    </head>
    <body>
        <div id='cube1' onclick='create()'>Create</div>
    </body>
</html>

I want to remove jquery.

I want to create a new javascript function that I can pass the <div/> #cube1 and the string variable ad.

The function will insert the string content into the <div/> and/or run the script - basically it needs to do the same thing jQuery's html() function does.

This does not work:

document.getElementById( 'cube1' ).innerHTML = ad;

I need it to run the script (the alert).

Any help is greatly appreciated!

Why re-invent the wheel? Do you have a particular project requirement that makes jQuery too heavy? — Matthew Blancarte, Jun 10 '13 at 17:47
@MatthewBlancarte: Deciding to use the native API is not reinventing the wheel. — , Jun 10 '13 at 17:49
Why are you trying to append a script to a `
` element? What are you trying to do in your actual project? There needs to be a better solution than setting the `innerHTML` to a ` — gen_Eric, Jun 10 '13 at 17:50
@CrazyTrain Right, but that doesn't accurately describe what OP is trying to do. It's not like he is starting from scratch. He has working code, but wants to refactor without any obvious benefit in doing so... Thus, my comment... — Matthew Blancarte, Jun 10 '13 at 18:00
@MatthewBlancarte: Huh? It describes precisely what OP is trying to do. He wants to take his function, and use the native API instead of jQuery. Whether you think it's beneficial or not is immaterial. I think it's very beneficial to avoid large libraries when there's not sufficient need for them. — , Jun 10 '13 at 18:03
@CrazyTrain Duplicating a working, optimized method for appending elements to the DOM is reinventing the wheel... If the goal is to save every last KB from being sent over the wire by avoiding jQuery, going native is the way to go here. No argument there. — Matthew Blancarte, Jun 10 '13 at 18:10
I wouldn't say jquery is optimized... in fact, most of the operations are slower than raw operations because they are built to factor in many other things like what browser, element type, etc. It is certainly more convenient to use jquery, but if the entire program only uses that one jquery statement, I can see why he would want to remove the overhead of loading the entire jquery library for just that one thing. — Lochemage, Jun 10 '13 at 18:28
This question is being posed because I am building for mobile and do not want to include any frameworks that I do not specifically need. I am trying to find a solution for Doubleclick ads that usually run inline that must be called dynamically for my project. This is a simple example of how I am trying to get to that goal. — Chris Johnson, Jun 10 '13 at 18:36
Sad that StackOverflow users have to make a case to justify *not* using jQuery. There's no greater example of "reinventing the wheel" than using large library for tasks that are easily accomplished without one. — , Jun 10 '13 at 18:52
@CrazyTrain If you class this as "easily accomplished" why haven't you answered it? @ OP, when you call `.html(newHtmlString)` jQuery internally invokes [`$.parseHTML`](http://api.jquery.com/jQuery.parseHTML/) with `keepScripts` set to `true`, which evaluates script tags' contents while parsing the HTML. In the other hand, the native `.innerHTML` method does not evaluate scripts inside the new HTML string. And just FYI this has been asked way too many times to list, just take a look around. — Fabrício Matté, Jun 11 '13 at 05:54
possible duplicate of [Can scripts be inserted with innerHTML?](http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) — Fabrício Matté, Jun 11 '13 at 05:54
@FabrícioMatté: It's answered below. We need two answers? Though that one is more verbose than needed `document.getElementById("cube1").appendChild(document.createElement("script")).text = 'alert("boom")';` You somehow find that difficult? — , Jun 11 '13 at 12:56
@FabrícioMatté: Why did you vote to close it as "too localized" then if it actually needs an answer? — , Jun 11 '13 at 13:23
@FabrícioMatté My assumption is that the OP wants to add a script to a page and have it execute, and that the inclusion of the ` — Tim Goodman, Jun 11 '13 at 14:54
@TimGoodman Oh you're right, I believe I've misread the question earlier. Looks like yours is a valid answer then +1. — Fabrício Matté, Jun 11 '13 at 15:28
@CrazyTrain Disregard my last @ reply to you, removed it to reduce confusion. I may have misread the question initially. Now I see that, depending on interpretation, OP either wants to simply append a script to a page and execute it (Tim's interpretation) - which should have been closed as a [dupe](http://stackoverflow.com/q/1068517/1331430) - or append arbitrary HTML that contains a script tag (which justifies the use of `.html()`) - asking others to rewrite such complex jq APIs code to vanilla JS without putting any effort == TL|NARQ. — Fabrício Matté, Jun 11 '13 at 15:42
@CrazyTrain, That less-verbose answer works, although I thought it might be nice to have a null check (`if (cube1)`). And I think technically a script without a type is invalid in HTML 4.x (although browsers don't seem to care). — Tim Goodman, Jun 11 '13 at 15:56
@TimGoodman: Yes, I certainly agree that a null check is a good idea if there's any doubt about its existence. But WRT the `type`, I think that's just an HTML technicality. With DOM elements in a JavaScript program, we're no longer working with HTML. — , Jun 11 '13 at 17:13
...anyway, here's a solution if OP is injecting arbitrary HTML with embedded scripts. http://jsfiddle.net/pM3bE/ Or like this if OP doesn't care about cleaning up the redundant scripts: http://jsfiddle.net/pM3bE/1/ — , Jun 11 '13 at 17:29

Tim Goodman · Answer 1 · 2013-06-10T18:19:39.667

4

You could do something like this:

function create(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "alert('boom');";
    var cube1 = document.getElementById("cube1");
    if (cube1) { cube1.appendChild(script); }
}

edited Jun 10 '13 at 18:19

answered Jun 10 '13 at 17:52

Tim Goodman

23,308
7
64
83

3

Afaik not all browsers support `innerHTML` on ` – Bergi Jun 10 '13 at 18:12
@Bergi Good call. I'd only tested in Chrome when I posted. From further testing, it appears that the version with `.innerHTML` fails in IE7, but `.text` works in all browsers I tried (IE7+, and the latest Chrome and Firefox). – Tim Goodman Jun 10 '13 at 18:21

Jquery 'html' function Vanilla JS without jQuery

1 Answers1