The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

My first attempt at DOM

Having been a document.write(); kind of person, this is my first foray into the confusing world of creating elements and text nodes, and appending children and the like. My first experiment was to use it to make a simple email-obscuring script, or display some standard text if Javascript is turned off.

Here's the HTML:

Code:

<div id="sidebar">
<h2>Contact</h2>
<p>You are reading this because you have disabled Javascript, or your browser does not support it. I use a simple script to obscure my email address from harvesting bots because I am too lazy to write a CGI email script.</p>
<p>If you desire to complain about something, be sure to <a href="/disclaimer.shtml">read the disclaimer</a> first, and potentially save yourself effort and possible humiliation.</p>
</div>

This was the best way I could think to do it, rather than create the <p> element out of nowhere, because appendChild() always puts it at the very end. Is there a way to insert a newly created element between two pre-existing elements?

Otherwise, can anyone suggest any improvements or better ways to achieve the same result? This is my use of DOM and the concept is still very foreign to me. I still think I need to ask myself how the above is, in practical terms, better than document.write("<p>blah blah <a href=\"mailto:blah@thingy.com\">he he</a> etc.</p>");. I've heard the standard reasons before, but I can't actually translate them into why they even matter if it works with every Javascript-supporting browser in the world.

document.write works with HTML and must run before the page finishes loading. DOM can work with both XHTML and HTML but must run after the part of the page to be updated has finished loading. You can update the page content with the DOM but not with document.write (since once the page has loaded you can only use the DOM or innerHTML to update it). Using the right DOM calls you can locate any spot in the page content and insert new content there at any time.

It sounds like document.write would not present any real disadvantages for a lot of different situations. I mean, unless you actually want to update the page content after it loads, is there any reason not to use documente.write?

EDIT: I ask this because elsewhere on my site I will be adding more complicated Javascript, such as calendars and organisers and the like, and they will be immeasurably more difficult to implement via the DOM. So if there is no compelling practical reason to use the DOM, I'd much rather go with document.write.

Perhaps even simpler than document.write is innerHTML. While not part of W3C standards, innerHTML (which felgall mentioned in passing) has become a convention among virtually all browsers since Netscape 6. You might want to look into it, if you haven't already.

A new problem has manifested itself, I have some text to insert via the createTextNode() function that contains special HTML characters which aren't rendering, but are being displayed literally instead.

The character in question is a right single-quote (&#8217;).

So a string containing "This won&#8217;t work." is currently rendering as "This won&#8217;t work." instead of "This won’t work."

As per my ability to find a solution within minutes of posting for help, I came up with an alternate solution which may or may not be better than resorting to innerHTML. I added the following function:

Code:

function quot(x){
return String.fromCharCode(x);
}

Which is called thusly: "I can"+quot(8217)+"t be stopped!" My only reservation about this method is that they show up in the source code as the character rather than the entity reference and I vaguely remember somebody telling me that this is not a good way to do it.