List manipulation in XUL

I'm trying to figure out an easy way to edit/add/delete items on a list in XUL. My initial thought is to have a separate file to handle all of this but I'm not sure on how to affect the main XUL with another file. So far my list looks like:

<?xml version = "1.0"?>
<!DOCTYPE window>

<window title = "Hello"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.m开发者_开发百科ozilla.org/keymaster/gatekeeper/there.is.only.xul" >

<script>
</script>
<listbox id = "mainList" flex = "1">
    <listhead>
    <listheader label = "Album Name"/>
    <listheader label = "Artist"/>

    <listheader label = "Year"/>
    <listheader label = "Sales"/>
    <listheader label = "Rating"/>
    <listheader label = "Genre"/>
    <listheader label = "Edit" />
    <listheader label = "Delete"/>

</listhead>

<listitem id = "1">
    <listcell label = "OK Computer"/>
    <listcell label = "Radiohead"/>
    <listcell label = "1997"/>
    <listcell label = "Platinum"/>
    <listcell label = "5/5"/>
    <listcell label = "Alternative Rock"/>  
    <button label = "Edit" oncommand= "editItem()"/>
    <button label = "Delete" oncommand = "deleteItem()"/>   
</listitem>

<listitem>
    <listcell label = "The Moon and Antarctica"/>
    <listcell label = "Modest Mouse"/>
    <listcell label = "2000"/>
    <listcell label = "Gold"/>
    <listcell label = "4.5/5"/>
    <listcell label = "Alternative Rock"/>
    <button label = "Edit"/>
    <button label = "Delete"/>
</listitem>
<listitem>
    <listcell label = "Pinkerton"/>
    <listcell label = "Weezer"/>
    <listcell label = "1996"/>
    <listcell label = "Gold"/>
    <listcell label = "5/5"/>
    <listcell label = "Alternative Rock"/>
    <button label = "Edit"/>
    <button label = "Delete"/>

</listitem>
<listitem>
    <listcell label = "Helplessness Blues"/>
    <listcell label = "Fleet Foxes"/>
    <listcell label = "2011"/>
    <listcell label = "Gold"/>
    <listcell label = "4/5"/>
    <listcell label = "Folk Pop"/>
    <button label = "Edit"/>
    <button label = "Delete"/>
</listitem>
</listbox>
</window>

Pretty simple but I'm confused about what javascript I need to make the buttons actually work. Ideally I'd want to have an Add button that will open a new window with blank fields for each of the columns, and then add the new row to the list. What would be the best way to accomplish this?

---

You use the regular DOM manipulation functions. When adding items dynamically it is easier if you have a "template" somewhere that you can clone and modify, e.g.:

<listitem id="template" hidden="true">
    <listcell class="album"/>
    <listcell class="title"/>
    <listcell class="year"/>
    <listcell class="group"/>
    <listcell class="rating"/>
    <listcell class="category"/>  
    <button label="Edit" oncommand="editItem()"/>
    <button label="Delete" oncommand="deleteItem()"/>   
</listitem>

You can then add a new item like this:

var item = document.getElementById("template").cloneNode(true);
item.removeAttribute("id");
item.removeAttribute("hidden");
item.getElementsByClassName("album")[0].setAttribute("label", albumName);
item.getElementsByClassName("title")[0].setAttribute("label", songName);
...
document.getElementById("mainList").appendChild(item);

Changing text of an existing item is similar. You have to get the new text from somewhere - adding text fields for editing is your responsibility however, the list has no built-in editing capabilities.

Removing items is obviously simpler:

var item = document.getElementById("item1");
item.parentNode.removeChild(item);