Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: innerHTML help

  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy innerHTML help

    function GenerateItembarLinks()
    {
    itembar = document.getElementById('itembar')
    items = document.getElementsByTagName('h2')
    for (var i=0; i<items.length; i++)
    {
    itembar.innerHTML = items[i].innerHTML
    }
    }

    Thats my code so far. It's purpose is to get all the links inside h2 headers in the "main content" section of my website and copy them to a bar at the top of my site. Although this code seems to copy only the last link. I'm still sort of new to javascript BTW... Any ideas?
    Last edited by absolutezero; 12-15-2008 at 06:59 AM.

  • #2
    New Coder
    Join Date
    Nov 2008
    Location
    New Delhi,India
    Posts
    26
    Thanks
    1
    Thanked 3 Times in 3 Posts

    single change

    Code:
    function GenerateItembarLinks()
    {
    itembar = document.getElementById('itembar')
    items = document.getElementsByTagName('h2')
    for (var i=0; i<items.length; i++)
    {
    itembar.innerHTML = items[i].innerHTML
    }
    }
    Currently itembar.innerHTML gets reset each time the loop executes. You must append the innerhtml of items[i] to previous one. Change the line
    Code:
    itembar.innerHTML= items[i].innerHTML;
    with
    Code:
    itembar.innerHTML+= items[i].innerHTML;

    thanks
    Vijay
    http://vijayjoshi.org

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Thanks!

    it is working so much better now. I had a quick issue with adding the li tags along with it so I just added them manually in the for loop:

    itembar.innerHTML += "<li>" + items[i].innerHTML + "</li>";

    Just in case anyone is wondering.

    Thanks again

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    If you want a lot better performance, do not update the innerHTML each time.

    Build up a string and at the end, update the innerHTML.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    New Coder
    Join Date
    Nov 2008
    Location
    New Delhi,India
    Posts
    26
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by A1ien51 View Post
    If you want a lot better performance, do not update the innerHTML each time.

    Build up a string and at the end, update the innerHTML.

    Eric
    Yes. accessing the dom each time you are inside the loop will cost some performance. It is a lot better to build a string and then set the innerHTML a single time.


  •  

    Tags for this Thread

    Posting Permissions

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