append child after the node of the script that made the call

Question

When the call bellow is done the class creates a set of elements (a form) and then I want to append them right after the script that called it.

I have been looking at various similar questions but the best of them simply append it after the last script on the page.

It would work nicely in the head but not the body.

<script type="text/javascript">
new exampleClass();
</script>

Because I am inserting HTML. The above code is added where the HTML should be injected. — transilvlad, Jun 23 '13 at 16:11
Why not have a hidden div or something with an ID that marks the location for insertion? This seems an odd way of doing it. — Xotic750, Jun 23 '13 at 16:13
Because I am only in control of the code in the JavaScript. The tag is out of my control and it does not have an id or anything. Besides the script needs to be generic. So from inside the js file I need to insert just like if I was to do a document.write but using append instead as my html is not string but objects. — transilvlad, Jun 23 '13 at 16:23
The current answer mentions all the options you have beside document.write. But unfortunately document.write is the only reliable solution if you don't have any control over the HTML (except for an ugly hack mentioned in the comments to the answer I linked to below). — bfavaretto, Jun 23 '13 at 16:34

score 1 · Answer 1 · answered Jun 23 '13 at 16:00

1

You should have some type of unique identification to find and append elements after the script. You can use document.getElementById() if you have id, or document.getElementsByTagName("script") to get script elements and get the required script element and then use appendChild()

answered Jun 23 '13 at 16:00

Balaji Sivanath

506
4
14

I agree, and I recommend using an ID on the script tag. There's no guarantee that the last script tag is the current one (see http://stackoverflow.com/q/14409982) – bfavaretto Jun 23 '13 at 16:02

Xotic750 · Answer 2 · 2013-06-23T17:43:12.193

Ok, here is the horrible hack mentioned.

HTML

<div>Stuff</div>
<script type="text/javascript">
    noop();
</script>
<div>More stuff</div>
<script type="text/javascript">
    new ExampleClass();
</script>
<div>More stuff</div>
<script type="text/javascript">
    noop();
</script>
<div>More stuff</div>

Javascript

function noop() {}

function appendAfter(node, newNode) {
    if (node.nextSibling) {
        node.parentNode.insertBefore(newNode, node.nextSibling);
    } else {
        node.parentNode.appendChild(newNode);
    }
}

function ExampleClass() {
    window.addEventListener("load", function () {
        var scripts = document.getElementsByTagName("script"),
            div = document.createElement("div"),
            length = scripts.length,
            i = 0,
            script;

        div.appendChild(document.createTextNode("Inserted"));
        while (i < length) {
            script = scripts[i];

            if (script.firstChild && script.firstChild.nodeValue.indexOf("ExampleClass()") !== -1) {
                appendAfter(script, div);
            }

            i += 1;
        }
    }, false);
}

On jsfiddle

score 1 · Accepted Answer · answered Jun 23 '13 at 18:03

Based on some of your comments and some other similar I have thought of doing something like this and it seems to work.

// Generate random string we can use as element id
var rs = Math.random().toString(36).substring(2);;
// Document write an empty div with the above string as id
document.write('<div id="' + rs + '"></div>');
// Get the element to use for append
var ip = document.getElementById(rs);

Please feel free to comment if you think it may have a fatal flaw.

Also seems very hackish IMO, but if you really have no say in the HTML, you don't have so many choices. — Xotic750, Jun 23 '13 at 18:44

append child after the node of the script that made the call

3 Answers3