SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Elements: createElement or innerHTML?

    I added an AJAX search feature to my website. It works similar to the new windows vista start menu search shortcut feature.

    What happens is the user requests a keyword search, the request is sent to a PHP script which sends it back to the browser. This is all done with xmlhttp, thus AJAX.

    Currently I have a script where it creates the new sets of links for each result. Therefore when PHP script returns 200 linking results, then there will be 200 <a> elements (which will link to their corresponding page). What happens which each link is that the Javascript creates a new A (link) element, sets its attributes, and appends it to the parent.

    However, instead of having to create so many elements, one solution would be to change the innerHTML of the parent element. So each time the results are fetched, then the innerHTML would simply be <a href="?link1">link1</a> <a href="?link2">link2</a> and so on...

    So which method should be used here? Both work, only I don't think that the innerHTML solution is correct and the createElement method is too slow...
    I can't believe I ate the whole thing

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using innerHTML isn't necessarily "correct" or "incorrect". innerHTML works - it's just not "standard". The nice thing is that any browser that supports document.createElement will also support innerHTML. However there is spotty support for *where* you can use innerHTML (IE gets buggy when messing with tables, for example).

    My recommendation is to do what works best for you. I prefer to use innerHTML because it's faster for me. However, there have been instances where I've used document.createElement - but typically that's been when I've only had to create a small number of items.

    Here's a decent benchmark:
    http://www.quirksmode.org/dom/innerhtml.html

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    createElement method is too slow
    createElement is actually quite fast.
    It is the constant redrawing of the page as each new element is appended that takes time.
    You can speed up the display by adding all of the new link elements to a documentFragment, and then appending the fragment in one go. Instead of 200 redraws you'll have one.

    Everybody has an opinion about innerHTML- use it if you like it. It can be a quick way to accomplish some tasks, but it is never the only solution.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great advice by jtrelfa and mrhoo!

    With test results like those (at quirksmode.org) it's no wonder innerHTML is used and "accepted" more now than ever.

  5. #5
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Great advice by jtrelfa and mrhoo!

    With test results like those (at quirksmode.org) it's no wonder innerHTML is used and "accepted" more now than ever.
    Are you sure it was quirksmode.org or was it quirksmode.com?
    I can't believe I ate the whole thing

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by matsko View Post
    Are you sure it was quirksmode.org or was it quirksmode.com?
    Same site.

  7. #7
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI: http://domscripting.com/blog/display/99

    To get academic for a second - innerHTML is a perversion. The DOM is not text, it's nodes, and creating a nodeset as though it were text is conceptually wrong. But hey - that's such an abstract point it's irrelevant, because in the real world, no real users are actually affected.

  8. #8
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a sweet idea - thanks for the link!
    var me = null;

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good link, brothercake. Thanks.

    Here's another reason to be wary of innerHTML, altho that post is from 2004 and I haven't yet retested it.


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
  •