SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    And here's the Javascript:
    Code:
    function writemail(){
       var anchor=document.createElement("a")
       var aTxt=document.createTextNode("email");
       anchor.appendChild(aTxt);
       anchor.setAttribute("href","mailto:me@somewhere.com");
       
       var re=/Javascript/;
       var side=document.getElementById("sidebar").childNodes;
       for(x in side)
          if(side[x].firstChild && re.test(side[x].firstChild.nodeValue)){
             side[x].firstChild.nodeValue="The webmaster can occasionally be reached via ";
             side[x].appendChild(anchor);
             side[x].appendChild(document.createTextNode(", although he is quite reclusive these days."));
          }
    }
    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.

    Cheers,
    D.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Cheers,
    D.
    Last edited by disgracian; Dec 28, 2006 at 22:04.

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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."

    Cheers,
    D.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use innerHTML to set the text node and that problem will be avoided. I know, it's not pretty, but it does the job.

  7. #7
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Cheers,
    D.
    Last edited by disgracian; Dec 29, 2006 at 13:19.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •