Updating an HTML list using Js

Question

So I have a js game like scrabble. Now when the user makes a new word, I would like the word to be added to a list that is displayed in a div on my page. The issue is I quite don't understand, how I could keep my old word created and insert a new word with new formatting and everything in a list form.

I know there is a list tag --

<ul>
     <li>apple</li>
     <li>ball</li>
</ul>

but what I can't really figure out is how do I use java script to enter the word as a new list entry.

I have used js to display the word created by the following syntax

document.getElementById('currentword').innerHTML = word;

where word is the variable that holds the current word created and currentword is the div id. but how do I use this kind of syntax for a list? Please help!

Thanks

EDIT: I would also like the last entry to the list as the first item on my list. Seems like the list populates itself but the latest entry gets hidden and the list doesn't really auto scroll down as the items are added. PS: Also incase someone knows how I could replace the tacky scroll bar option generated by CSS to a custom scroll bar. It would be great if you could point me in the correct direction!

Lee · Accepted Answer · 2010-11-30 05:23:58Z

4

Given a list:

<ul id="theList" >
     <li>apple</li>
     <li>ball</li>
</ul>

you could add an <li> like this (assuming that the variable word contains the word you want to add):

document.getElementById('theList').innerHTML += ('<li>'+word+'</li>');

There are other ways too, but this one is probably the simplest.

answered Nov 30, 2010 at 5:23

Lee

13.5k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shouvik Over a year ago

Thanks... btw if I want to introduce CSS effects on this, replacing the id with with class would help and calling the style would work right?

Lee Over a year ago

If you replace id with class, then getElementById() won't find the ul element any more. There is a getElementsByClassName(), but it works slightly differently. Of course, id and class can exist together on the same tag (like this: <ul id="theList" class="someClass">). That will let you apply css rules by class, and still use getElementById() to retrieve the element from javascript. If you're doing advanced effects or anmimation, It might be easier to try a framework like jQuery.

Shouvik Over a year ago

Thanks lee. actually I am using mootools as my framework so I would not like the inclusion of another fw. :) But I have already created classes of all the effects I would like using CSS3 so I was just wondering, the way I render animation to div's on the dom, if it would be possible to do the same. Another issue I have mentioned is I would like the last entry to the list as the first item on the list. It would be great if you could sort that out! Thanks... :)

epascarello Over a year ago

Performance of this will suck once the list gets long. You keep redrawing all of those elements instead of just adding one.

Lee Over a year ago

@epascarello: yes, as I said: "There are other ways, but this one is probably the simplest". Simplest, not best performing.

Derek Adair · Accepted Answer · 2010-11-30 05:43:34Z

3

I use jQuery for dom manipulation and would recommend the same for you, it adds a lot of readability and tons of neat (x-browser friendly) functionality.

For example... the append api call would do the job if you were using jQuery.

<ul id="words">
 <li>Some Word</li>
 <li>Another Word</li>
</ul>

$("#words").append("<li>" + yourNewWord + "</li>");

Or with straight javascript...

document.getElementById('words').innerHTML += '<li>' + yourNewWord + '</li>';

EDIT: I believe in motools the equivalent to .append is .grab

edited Nov 30, 2010 at 5:43

answered Nov 30, 2010 at 5:26

Derek Adair

22k31 gold badges101 silver badges134 bronze badges

3 Comments

Shouvik Over a year ago

I am actually using mootools, would not like to introduce another library... but thanks for ur help :)

Shouvik Over a year ago

Any idea how to get rid of the bullets for certain entries while leave it for the rest?

Shouvik Over a year ago

Just one more question... How do I get the latest list entry to go on top of the list? Right now they are getting appended to the bottom of the list! Thanks...

epascarello · Accepted Answer · 2010-11-30 05:25:04Z

1

Basic idea:

var li = document.createElement("li");
li.innerHTML = "new text";
document.getElementById("TheULsId").appendChild(li);

answered Nov 30, 2010 at 5:25

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Robin Maben · Accepted Answer · 2010-11-30 05:39:54Z

1

<ul>
 <li>apple</li>
 <li>ball</li>
</ul>

then,

var newListItem = $('<li></li>').html("myNewWord");

$("ul").append(newListItem);

edited Nov 30, 2010 at 5:39

answered Nov 30, 2010 at 5:28

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Comments

Shouvik · Accepted Answer · 2010-11-30 09:16:29Z

0

Well to the exact solution of my question, I figured out the rest from mootools docs :)

This fiddle demonstrated most of it.. http://jsfiddle.net/WngSS/1/

As for the scroll bar goes, well to customize ur own scrollbar you just use css effects.

answered Nov 30, 2010 at 9:16

Shouvik

11.8k17 gold badges61 silver badges90 bronze badges

Collectives™ on Stack Overflow

Updating an HTML list using Js

5 Answers 5

5 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related