Creating an Element: A To Do List

 

This shows how to use the 'createElement' command to create a new element for a To Do List. This writes the To Do List to the current window. With a little editing, you could have the list written to an external text file.

The HTML and JavaScript:

<script type="text/javascript">
function addItem() {
 var myitem = document.getElementById("ItemToAdd").value;
 var mylistItems = document.getElementById("mylist");
 var newP = document.createElement("li");
 var textNode = document.createTextNode(myitem);
 newP.appendChild(textNode);
 document.getElementById("mylist").appendChild(newP);
 return false;
}
</script>
<br />
<form action="#" onsubmit="return addItem()">
<span style="color: #741b47; font-family: tahoma,lucida grande;
"><b>New Item for 'To Do' List: </b></span>
<input id="ItemToAdd" type="text" value="Go to bank" />
<input onclick="addItem()" type="button" value="Add" />
<br />
</form>
<br />
<span style="color: #741b47; font-family: tahoma,lucida grande;
">To Do Today:</span> 
<br />
<ol id="mylist"></ol>
<

Try it out. Enter some text and click the button to add new items to the to-do list:

New Item for 'To Do' List:

To Do Today:

Want HTML Code? Go to: http://write-html-code.blogspot.com/

Please leave me a comment on this site.