Insert list item with javascript

Discussion in 'Web Design and Development' started by Me1000, Feb 4, 2009.

  1. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #1
    So this is what I need to do...
    This code:
    Code:
    var newListItemToAdd = '<li id="'+updatedItems[i]+'" title="'+updatedItems[i]+'\'s caption goes here"><img class="pic_thumb" src="photos/'+updatedItems[i]+'" alt="" width="150" height="150" /></li>';
    					    	 		
    needs to be inserted into the top of an unordered list (ul)
    so for example, the code may be like...
    Code:
    <ul id="thumbs">
    <li id="blah">blah</li>
    <li id="blah2">blah2</li>
    </ul>
    
    and when the javascript runs I need to insert a new list item preferably at the top.

    I'm at a loss right now.
    Any ideas? :eek:

    Thanks,
    :apple:
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Below is a simple function that allows you to insert a new list item at any position within an unordered list. Just edit the "<li>test</li>" in the onClick part to be that long string you added in your original post. Or, if you globally declared it earlier in your script as a string named "newListItemToAdd" then edit "<li>test</li>" to be "newListItemToAdd". I just wrote the function which has 3 parameters -- first is the div ID of the UL tag, second is which list item position (starting at 0) to insert a new list item, third is the new list item HTML.

    Tested, works.

    Code:
    <form>
    
    <!-- Change "<li>test</li>" to whatever you want -->
    <!-- Change "0" to which list item to insert before (starts at 0, not 1) -->
    
    <input type='button' value='Insert'  onClick="insertItem('thumbs',0,'<li>test</li>')">
    
    <ul id="thumbs">
    <li id="blah">blah</li>
    <li id="blah2">blah2</li>
    </ul>
    
    </form>
    
            
    <script language="javascript">
    <!--//
    
    function insertItem(myid,position,newListItem) {
        var ul = document.getElementById(myid);
        var li = document.createElement("li");
        li.innerHTML=newListItem;
        ul.insertBefore(li, ul.getElementsByTagName("li")[position]);
    }
    
    //-->
    </script>        
            
    -jim
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Jim, correct me if I'm wrong, but it looks like from the code that you'll end up with
    HTML:
    <li><li>test</li></li>
    as the new item because the passed in value already has a tag and is inserted into an li tag. I didn't try out the code though. It would be a simple fix if it is an issue.
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Interestingly, including those opening and closing li tags works fine in FF, i.e. the list item displays properly. I used a simplified version for testing purposes, it worked in FF, and so does the OPs string with the tags.

    Now I look more closely at the OP's string and see it's much worse than just what you pointed out. There are two attributes as well, "ID" and "title" that must be included. Oops.

    Technically, the inserted LI should be created first as my function does now, then I need to call the createAttribute and setAttribute methods for the "id" and "title" attributes the OP is using and then finally do the innerHTML part.

    Darn.

    This blows away my function and it's not proper coding to allow a browser quirk like this.

    It's late for me, I can't fix it now. I'll re-write this tomorrow if angelwatt doesn't beat me to it.

    -jim
     
  5. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #5
    That's alright guys I was most interested in the
    insertBefore()
    getElementByTagName()
    and createElement()

    methods.

    Everything is working exactly as it's suppose to.

    Thank you both! You've been a great help!!
    :)
     
  6. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #6
    Out of curiosity, Why use JavaScript to add HTML? Seems like it could cause usability issues for non javascript users.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    The new HTML could be the result of a user action and AJAX to get the new info. The OP may be providing an AJAX on top of an existing solution that doesn't require JavaScript. That's speculation though. I've done the same thing on one of my site's pages.
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    To OP: awesome, thanks for posting! That was more challenging than at first sight! If you want to code it according to standards, just add in the createAttribute and setAttribute methods for the "id" and "title" attributes you had in your list item. That's all.

    -jim
     
  9. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #9
    I'm developing a simple web app that will be used on an intranet, on a controlled number of machines. Javascript is required... :)


    :apple:
     
  10. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #10
    Nice, Nice...guess no biggie in a controlled environment :)
     

Share This Page