Javascript - include another script by using the

Question

Okay so basically you want to write HTML inside the contents of your div. Say you have a div with the following id: myContentDiv

    /**
    *  NOTICE HOW IM USING \ before " TO ESCAPE THE CHARACTERS INSIDE THE HTML STRING
    */
    var yourCustomHTMLString = "<h1>this is a tag</h1><div class=\"yourClass\">something</div>";

    var contentDiv = document.getElementById('myContentDiv');
    contentDiv.innerHTML = yourCustomHTMLString;

Also, in your mark-up you need to specify a trigger for your JS, for instance an onload trigger.

window.onload = function(){
document.write(example_content);
}

And now say you want a function that will load an HTML string into a div.

function loadContent(HTMLstring, targetDivID)
{
   var myDiv = document.getElementById(targetDivID);
   myDiv.innerHTML = HTMLstring; 
}

If you are trying to include a JS script inside another JS script, you need Ajax. If you are using a JS library, all common ones have a script load method predefined.

Dynamically load a JavaScript file

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Okay so basically you want to write HTML inside the contents of your div. Say you have a div with the following id: myContentDiv

    /**
    *  NOTICE HOW IM USING \ before " TO ESCAPE THE CHARACTERS INSIDE THE HTML STRING
    */
    var yourCustomHTMLString = "<h1>this is a tag</h1><div class=\"yourClass\">something</div>";

    var contentDiv = document.getElementById('myContentDiv');
    contentDiv.innerHTML = yourCustomHTMLString;

Also, in your mark-up you need to specify a trigger for your JS, for instance an onload trigger.

window.onload = function(){
document.write(example_content);
}

And now say you want a function that will load an HTML string into a div.

function loadContent(HTMLstring, targetDivID)
{
   var myDiv = document.getElementById(targetDivID);
   myDiv.innerHTML = HTMLstring; 
}

If you are trying to include a JS script inside another JS script, you need Ajax. If you are using a JS library, all common ones have a script load method predefined.

Dynamically load a JavaScript file

edited May 23 '17 at 10:31

Community

1
1

answered Aug 09 '12 at 12:16

The div would not have yet been created, so I can't really address it with its id. What I have is an object that contains the HTML string and another Object that uses that string to write it in another div. Sounds complicated I know, its just how my current project is built. – Zyyk Savvins Aug 09 '12 at 12:22
What are the triggers for the events? – Aug 09 '12 at 12:27
What happens first? I would assume you generate the divs at JS level and then you want to write into them. Is that correct? If there is the only event that causes the flow is the onload, then why do you need those two? High level JS libraries(like Google Closure), have methods like goog.dom.createDom. What that does is create a domElement with all the properties and text you want. So instead of first creating the divs and then populating them with content, do everything at once. Don't see why not, unless there is an event which has to trigger all this(such as a mouse click etc) – Aug 09 '12 at 12:30
Its like this: I have an Object, called Frame, that creates and controls a div on screen that acts similar to a window (can be dragged, resized, maximized, closed, etc ...) Then I have an Object called App, which is used to be extended into sub classes. Now, each sub class creates the contents of the Window Object. So the div for the window content is being created inside the same string where the – Zyyk Savvins Aug 09 '12 at 12:33

score 0 · Answer 2 · answered Aug 09 '12 at 12:40

If I understand you correctly, you insert your content as innerHTML into a <div> , and the scripts don't execute.

As far as I know, this is the expected behavior, as there is no onLoad, document.ready etc. event when you alter the innerHTML of an element.

You could parse the inserted string for <script> nodes. Warning, this is a very "hacky" thing to do, usually there are better ways, for example using the success callback of the ajax functions of the various script libraries.

Nevertheless, here is what we used once. This needs to be executed after you inserted your content string. Please don't judge me, I was young and the time was short...

var div = document.getElementById("yourParentDiv");
if(div != null){
    var x = div.getElementsByTagName("script");
    for(var i=0;i<x.length;i++) {
       eval(x[i].text); 
    }
 }