PARTS:
Part 1
Part 2
Part 3
Part 4
Part 5
Part 6
Part 7
Part 8
Part 9
Part 10
Part 11
Part 12
Part 13
Part 14
Part 15
Jonathan Snook, Aaron Gustafson, Stuart Langridge, and Dan Webb
"Accelerated DOM Scripting with Ajax, APIs, and Libraries"
This isn??™t part of any specification,
but it has been implemented across all browsers and is even finding support in
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 34
XHTML. Firefox 1.0, for example, did not support the use of innerHTML when the document
was served as XHTML. Firefox 1.1+ supports innerHTML with XHTML, though.
innerHTML enables you to specify a string of HTML that will be parsed and inserted into
the document. This can be an efficient way of inserting multiple elements, attributes, or text
content.
Let??™s do a comparison. First, use DOM methods:
var el = document.createElement("div");
var txt = document.createTextNode("What are you looking at?");
var img = document.createElement("img");
img.src = 'imagename.gif';
img.alt = 'I\'m wearing glasses.';
img.height = 200;
img.width = 600;
el.appendChild(txt);
el.appendChild(img);
Compare it with using innerHTML:
var el = document.createElement("div");
el.innerHTML = 'What are you looking at?
';
Not only is it less code but it also actually performs better in the browser. However, don??™t
accept innerHTML as a panacea. It will be important to evaluate when one approach is more
appropriate than the other. Using innerHTML is great when you??™ve got a large block of HTML
that needs to be inserted; this is something you??™ll commonly see when using Ajax.
Pages:
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
but it has been implemented across all browsers and is even finding support in
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 34
XHTML. Firefox 1.0, for example, did not support the use of innerHTML when the document
was served as XHTML. Firefox 1.1+ supports innerHTML with XHTML, though.
innerHTML enables you to specify a string of HTML that will be parsed and inserted into
the document. This can be an efficient way of inserting multiple elements, attributes, or text
content.
Let??™s do a comparison. First, use DOM methods:
var el = document.createElement("div");
var txt = document.createTextNode("What are you looking at?");
var img = document.createElement("img");
img.src = 'imagename.gif';
img.alt = 'I\'m wearing glasses.';
img.height = 200;
img.width = 600;
el.appendChild(txt);
el.appendChild(img);
Compare it with using innerHTML:
var el = document.createElement("div");
el.innerHTML = 'What are you looking at?
';Not only is it less code but it also actually performs better in the browser. However, don??™t
accept innerHTML as a panacea. It will be important to evaluate when one approach is more
appropriate than the other. Using innerHTML is great when you??™ve got a large block of HTML
that needs to be inserted; this is something you??™ll commonly see when using Ajax.
Pages:
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83