1

I am trying to replace the contents of a div with a script using innerHTML.

Here is generally what the important parts of my HTML looks like:

    <script> function replace() {
    document.getElementById("area").innerHTML = '<script type="text/javascript" src="SOMELINK"></script>';
    </script>

    <button onclick=replace()> replace </button>
    <div id = "area"> hello </div>

When the button is clicked, I want the div #area to be replaced by the script, such that it shows the contents of the link. I can use innerHTML to replace it with a plaintext, like replace "hello" with "Hello World", but when I include the tags, nothing shows up at all. If I remove the tags, the rest of the url that goes inside the tags shows up. Any idea on what I might be doing wrong, and how I can use javascript to replace a div with a script object?

edit: I had mistyped the script tag, but now its fixed!

Grace Park
  • 21
  • 4
  • script tag will not be displayed but whatever javascript src points to or the javascript which is in content of – gp. May 04 '15 at 01:16

2 Answers2

2

Your script tag is malformed, and inserting a script via innerHTML doesn't execute the script. You can create a script element and append it, if you want it to load the source or execute its inner contents.

var area = document.getElementById('area'),
    script = document.createElement('script'); // Create the script
// Set the script source
script.src = 'myAwesomeScript.js';
// Remove the contents of the DIV
area.innerHTML = '';
// But why would you nest a script inside of a DIV, anyway?
area.appendChild(script); // Append it

If you actually want to replace the whole DIV with a script tag:

var area = document.getElementById('area');

// * elem is the element to replace
// * src is the script's source
function replaceWithScript(elem, src) {
    var script = document.createElement('script');
    script.src = src;
    // Insert script after elem
    elem.parentNode.insertBefore(script, elem.nextSibling);
    // Remove elem. Now script has its position, and it looks
    // like it replaced it.
    elem.parentNode.removeChild(elem);
}

replaceWithScript(area, 'myAwesomeScript.js');

Finally, if you want the script to show up as text, then it's just:

document.getElementById('area').innerText = '<script src="farboo.js"></script>';
  • 1
    Thanks for your answer! But I am getting an error that says: isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. Would the javascript have to be in an external file and be loaded into my main file? – Grace Park May 04 '15 at 03:58
  • Take a look at this: http://stackoverflow.com/questions/24297829/execute-write-on-doc-it-isnt-possible-to-write-into-a-document-from-an-asynchr, This happens because you're using `document.write` in your script. You could add the script inside of the script tag (as an inline script), but if you run it when the document has finished loading, for instance, your whole page would disappear. The best solution is to not use `document.write` at all, and use the DOM API to create/insert elements. –  May 04 '15 at 04:13
  • I used appendChild(script), as you wrote in your answer, and put it in the index.html file (main html file). When that post that you referenced says, "dynamically loaded script" does that have to be an external file? Another issue that I am running into is that originally, I was passing in an int as a variable to determine which id to use (specifically, I have three divs, with ids "item1", "item2", and "item3". I want to open a google trend site that looks up item1, item2, or item3 and embed the google trend chart in my website) Would that still be possible? thanks so much! – Grace Park May 04 '15 at 05:32
  • Well yeah, that's an external script. And you're loading an external script, right? Hmm, if I get it correctly, I'm assuming you were passing the int to `document.write`? Well, you can loop `n` times to create your elements with `document.createElement('div')`, and concatenate `n` to the DIV's id. When you want to append them, just do: `yourContainer.appendChild()` for each div (or append each div to a fragment and then append the fragment). You should set your script to do this `onload` though, to make sure the DOM is ready. –  May 05 '15 at 01:38
0

it should work if you provide it with well formed HTML

document.getElementById("area").innerHTML = 
  '<script type="text/javascript" src="SOMELINK"></script>';

(you were missing the closing tag)

la-yumba
  • 81
  • 1
  • 4