CODEWITHSUNDEEP
javascript
Himmators
Himmators

Reputation: 15036

Why can't document.write be used to load a module using Dom-scripting?

In this question, I got the following answer:

Looking at Google's maps script it's failing to load the Geocoder module because it's using document.write to do so, a method that has to be run from a included in the HTML document at parse time, not imported by use of DOM scripting as you're doing here.

Which is a method that has to be run from a included in the html at pare time? How do I do this? What is being imported by the use of DOM-scripting? How do I recognize DOM-scripting?

I'm pretty new to javascript and I don't really understand the reference here.

Upvotes: 2

Views: 1347

Answers (2)

PleaseStand
PleaseStand

Reputation: 32112

document.write is an old method that inserts HTML into the page while it is loading, at the place where the script is located. For this reason, it is commonly used in JavaScript "widgets" that can be copy-and-pasted into a web page. However, if the page has finished loading, all it does is start the creation of a new page with that HTML in it.

<div id="foo"> 
    <script type="text/javascript"> 
        document.write("<h1>Main title</h1>") 
    </script> 
</div>

This is in contrast to the functions that jQuery provides or the underlying DOM methods that it uses, which have to be called after the page has loaded:

// The jQuery way
$(document).ready(function() {
    $('#foo').append('<h1>Main title</h1>'); 
});

// The plain JS way
window.onload = function() {
    var h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode('Main title'));
    document.getElementById('foo').appendChild(h1);
};

If there is simply no way to change the widget (e.g. it is served by a third-party), and you have to, for example, load the widgets from jQuery, you could override the document.write and document.writeln functions to do what you want them to just before loading it.

Keep in mind that for this to work correctly when there are multiple widgets on a page, you would have to ensure that the first gadget has completely loaded before you even try to load the second.

Upvotes: 2

rob
rob

Reputation: 10117

isDom scripting is when you work on an already loaded document, and manipulate the "DOM elements" (DOM = "document object model"....javascript representations of the components of a web page). You can add and remove elements, and manipulate their properties such as styles and content.

As opposed to altering the html text itself, prior to it being turned into elements, with document.write. document.write only works at the very beginning, when the page is being converted from text to web page components. It's the "old way", since in the old days of javascript it was the only way to do things. There are cases where it is still useful, but it general it is avoided these days.

Example of dom scripting:

var elem = document.getElementById("someelement");
var childElem = document.createElement ("DIV");
childElem.innerHTML = "this is a <i><b>test</b></i>";
elem.appendChild (childElem);

Note that use of "innerHTML" is a common shortcut that is somewhat in the middle ground. It's used post-page load, but it works by supplying textual html code. Depending on context, it may or may not be considered "dom scripting".

Upvotes: 3

Related Questions