HTML and CSS Reference
In-Depth Information
Standardizing and Extending Ad Hoc JavaScript Conventions
One important aspect of the HTML5 specification is that a number of the messy aspects of
JavaScript and its usage within a Web browser finally have a specification. Various
JavaScript objects like
Navigator
,
History
, and more are not really part of any standard
other than an ad hoc one. In many cases, proprietary JavaScript objects, properties, and
methods are documented, but only by the originating vendors, and other implementations
that may or may not conform to this proprietary specification may exist.
Probably the most famous of the proprietary turned common features in JavaScript is
Microsoft's
innerHTML
property, which allows for quick creation of new markup in
documents. This property is commonly used by Web developers who accept that it is
widely implemented and quite useful compared to standard DOM techniques. As a
demonstration, consider the code needed to insert the following markup:
<p>
This is
<strong>
just
</strong>
a test.
</p>
into a named
div
element:
<div id="div1"></div>
Using the DOM, the code might look like this:
var str1,str2,str3;
var el1,el2;
el1 = document.createElement('p');
str1 = document.createTextNode('This is ');
el1.appendChild(str1);
el2 = document.createElement('strong');
str2 = document.createTextNode('just');
el2.appendChild(str2);
el1.appendChild(el2);
str3 = document.createTextNode('a test.');
el.appendChild(str3);
document.getElementById('div1').appendChild(el1);
Using chaining, it is possible to jam statements together, but the task is much easier
using Microsoft's
innerHTML
property. Simply make a string like so
var newElements = "<p>This is <strong>just</strong> a test.</p>";
and then set the contents of the
div
to this string:
document.getElementById('div1').innerHTML = newElements;
By setting the
innerHTML
property, in effect, the browser's parser is invoked, and it creates
elements from the string provided.
Given the wordiness of DOM methods, many developers prefer Microsoft's
innerHTML
scheme and thus it has been widely copied and put into other browsers. However, HTML5
does not cover all of Microsoft's other, related properties like
innerText
and
outerText
,
though
outerHTML
for now appears to be covered.
