Вы используете обычные функции управления DOM .При динамическом добавлении элементов проще, если у вас есть «шаблон», который можно клонировать и модифицировать, например:
<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>
Затем вы можете добавить новый элемент, например:
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);
Изменение текста существующего элемента аналогично.Вы должны получить новый текст откуда-то - добавление текстовых полей для редактирования - ваша ответственность, однако в списке нет встроенных возможностей редактирования.
Удаление элементов, очевидно, проще:
var item = document.getElementById("item1");
item.parentNode.removeChild(item);