Insert list item with javascript

[Me1000]

So this is what I need to do...
This 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...

<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?

Thanks,

 

[SrWebDeveloper]

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.

<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

 

[angelwatt]

Jim, correct me if I'm wrong, but it looks like from the code that you'll end up with

<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.

 

[SrWebDeveloper]

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

 

[Me1000]

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!!

 

[ChicoWeb]

Out of curiosity, Why use JavaScript to add HTML? Seems like it could cause usability issues for non javascript users.

 

[angelwatt]

Out of curiosity, Why use JavaScript to add HTML? Seems like it could cause usability issues for non javascript users.

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.

 

[SrWebDeveloper]

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

 

[Me1000]

Out of curiosity, Why use JavaScript to add HTML? Seems like it could cause usability issues for non javascript users.

I'm developing a simple web app that will be used on an intranet, on a controlled number of machines. Javascript is required...

 

[ChicoWeb]

I'm developing a simple web app that will be used on an intranet, on a controlled number of machines. Javascript is required...

Nice, Nice...guess no biggie in a controlled environment