Use DOM to Insert External JavaScript files

Use DOM to Insert External JavaScript files

In this JavaScript article tutorial, jsB@nk is happy to show you another JavaScript solution to include external JavaScript files in your web pages. This JavaScript method uses DOM (Document Object Model) to process. Please go to the inner post-page for full completed instructions and JavaScript source codes for samples, along with many reality problems.

Try more other related JavaScript solutions for inserting external JavaScript files:
- Simple Tips and Code to Load External JavaScript, CSS Files Dynamically
- Loading External CSS & JavaScript Files Faster With PHP mod_rewrite
- How to use an external JavaScript
- The best way to load external JavaScript


Sampled by © JavaScriptBank.com

This page shows you how to use javascript (js) to insert a html that contains js code and have that js code run.If you don't know how to insert a element using js, see:Adding HTML Content with Javascript.

The Problem

There are lots js based widgets today. For example, web share widget,Google search widget,Comment widget,twitter, facebook, amazon ads... etc. They let you easily add functionality to your site.

If your webpage is static html, or generated by php or content manager software, you can directly include these widgets at the right place at the server side. However, sometimes it is convenient to use a js to insert them. Because, you may want the location of the widget to be different for different pages. Or, only centain pages you want to include the widget, but you don't know which until the page is generated.

So, the solution is to use a client side js that insert these js widgets.

If you use a javascript to insert a js code xyz, will the newly inserted xyz script run?

It depends on how you construct the element to be inserted. If the 「<script...>...</script>」 is constructed using 「innerHTML = ...」, then it won't work. But if it is constructed as a DOM element, then it'll work.

Using innerHTML Does Not Work

First, let's see what happens if you don't do anything special.

Suppose you want to use js to insert the following js code.

<div class="xyz"> <p>Fantastic!</p> <script type="text/javascript">alert("woot!");</script></div>

Suppose you do it this way:

var myElement = document.createElement("div"); // create new div elementmyElement.setAttribute("class", "xyz"); // add a class attribute// add html in the div elementmyElement.innerHTML='<p>Fantastic!<\/p> <script type="text/javascript">alert("woot!");<\/script>';// add the new element after the first p tagdocument.body.insertBefore(myElement, (document.getElementsByTagName("p"))[0]);

It will fail in IE8, Google Chrome, Opera. (but works in Firefox 3.6.12).

You can see what your browser do here: insert_js.html.For a version where each js file is on its own page, see: js_insert_js.html.

Creating 「<script>」 Object by createElement

Here's how to make it work. It's easy. Instead of using 「myElement.innerHTML="<script>...</script>";」, you should create the “script” element as a DOM object, then you insert this object.

Here's a sample js code:

var ele = document.createElement("script");ele.type = "text/javascript";ele.innerHTML='alert("woot!");'document.body.insertBefore(ele, (document.getElementsByTagName("p"))[0]);

Here's a test page using this code: js_insert_js_works.html.

Twitter Example

Suppose you want to insert this code:

<div class="twtr"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

It's a widget that shows a Twitter button with number of tweets of the page.

Here's how you do it in your js:

// insert a twitter div tag before element “cg”function insertTwitter (cg) {    var mdv = document.createElement("div");    mdv.setAttribute("class", "twt");    mdv.innerHTML='<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="xah_lee">Tweet</a>';    var ele = document.createElement("script");    ele.type = "text/javascript";    ele.src = "http://platform.twitter.com/widgets.js";    mdv.appendChild(ele);    document.body.insertBefore(mdv, cg);}// insert before the first p taginsertTwitter((document.getElementsByTagName("p"))[0]);

Thanks to “idealmachine” and DVK. stackoverflow.com.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Powerful JavaScript Applications Optimized for Mobile Platform with QRCode
10 Awesome CSS3 Tips & Tricks
Awesome WebGL Experiments with Stunning JavaScript Applications
Basis of JavaScript Structure with Dojo
2 Useful Tips about JavaScript Conditionals
Awesome JavaScript Tutorials to Create JavaScript Animations
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes
16 Best JavaScript Libraries for Wrapping HTML5 Canvas
CSS3 box-shadow Property Basics
Best jQuery / JavaScript Color Pickers


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Top 50 Most Addictive and Popular Facebook mini games
50+ Beautiful Resources of HTML Form using CSS and JavaScript
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes
Top 10 Best JavaScript eBooks that Beginners should Learn
Using JavaScript to Change Your Web Page Font Size
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com
<center>This page uses FRAME but your browser do not support. You can enter through <a href="http://www.javascriptbank.com/javascript/article/Use_DOM_to_Insert_External_JavaScript_files.php">http://www.javascriptbank.com/javascript/article/Use_DOM_to_Insert_External_JavaScript_files.php</a> </center>