Добавление и удаление элементов DOM

Чтобы создать новый элемент - используется метод document.createElement(тип). Для того, чтобы элемент увидеть на странице, его необходимо добавить в дерево DOM. Это можно сделать методом appendChild, который в DOM есть у любого элемента.

В следующем примере в конец дерева DOM (в конец страницы) добавляется строка текста:

<html>

<head>

function go (){

var newDiv = document.createElement ( "div" ); //созданиеэлемента

newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элента

newDiv.style.backgroundColor = "red";

document.body.appendChild ( newDiv ) //добавление нового элемента в дерево

}

</script>

</head>

<body>

Текст

<inputtype= "button" onclick= "go()" value= "Go" />

</body>

</html>

Новый элемент можно добавить не в конец детей, а перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.

<html>

<head>

function go (){

var newDiv = document.createElement ( "div" ); //созданиеновогоэлемента

var oldDiv = document.getElementById ( "id1" ); //получениесуществующегоэлемента

newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента

newDiv.style.backgroundColor = "blue";

document.body.insertBefore ( newDiv, oldDiv ) //добавление нового элемента перед существующим

}

</script>

</head>

<body>

<divid= "id1" > Текст </div>

<inputtype= "button" onclick= "go()" value= "Go" />

</body>

</html>

Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя.Если родитель элемента неизвестен, то его легко получить при помощи функции parentNode. Следующий пример реализует добавление элемента и его удаление двумя способами.

<html>

<head>

function add (){

var newDiv = document.createElement ( "div" ); //созданиеновогоэлемента

newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента

newDiv.style.backgroundColor = "green";

newDiv.id = "id1";

document.body.appendChild ( newDiv ) //добавлениеновогоэлемента

}

function del1 (){

var toDel = document.getElementById ( "id1" ); //получениеэлементадляудаления

document.body.removeChild ( toDel ) //удалениеэлементакакпотомка body

}

function del2 (){

var toDel = document.getElementById ( "id1" ); //получениеэлементадляудаления

toDel.parentNode.removeChild ( toDel ) //удаление элемента как потомка своего родителя

}

</script>

</head>

<body>

Текст

<inputtype= "button" onclick= "add()" value= " Добавить " />

<inputtype= "button" onclick= "del1()" value= " Удалить 1" />

<inputtype= "button" onclick= "del2()" value= " Удалить 2" />

</body>

</html>

В следующем примере продемонстрировано добавление элемента маркированного списка и удаление произвольного элемента списка:

<html>

<head>

function add ( form ){

var newDiv = document.createElement ( "li" ); //созданиеновогоэлементасписка<li>

newDiv.innerHTML = form.about.value + "<input type=\"button\" onclick=\"del(this)\" value=\"Удалить\"/>";

newDiv.style.backgroundColor = "#3FD3A7"; //установка свойств нового элемента

var list = document.getElementById ( "list1" ); //получение элемента-списка по id

list.appendChild ( newDiv ) //добавление нового элемента

}

function del ( toDel ){ //toDel - передаваемыйэлемент<input>

var toDel_parent = toDel.parentNode; //получениедочернегоэлемента - <li>, кудавходитпередаваемый<input>

toDel_parent.parentNode.removeChild ( toDel_parent ) //удалениеэлемента<li>какпотомкасвоегородителя

}

</script>

</head>

<body>

Список:

<ulid= "list1" >

</ul>

<form>

<inputtype= "text" name= "about" >

<inputtype= "button" onclick= "add(this.form)" value= " Добавить " />

</form>

</body>

</html>

Работа с таблицами в DOM

Таблица и ее элементы (строки, столбцы) также являются объектами дерева DOM и поддерживают все методы работы с ним. Кроме того, у таблиц (объект HTMLTableElement)есть дополнительные средства навигации и доступа к элементам.

table. rows [] – список строк таблицы;

tr. cells [] – список ячеек строки;

tr. rowIndex – номерстроки;

td. cellIndex – номер ячейки в строке.

Можно получить количество строки таблицы и количество ячеекв строке:

table. rows. length – количество строк таблицы;

tr. cells. length – количество ячеек в строке.

Для добавления и удаления элементов таблицы можно воспользоваться функциями:

table. insertRow ( индекс_строки ) – вставка строки;

table. deleteRow ( индекс_строки ) – удаление строки;

tr. insertCell ( индекс_строки ) – вставка ячейки в строку.

tr. deleteCell ( индекс_ячейки ) – удаление ячейки в строке.

В следующем примере реализован сценарий добавления и удаления данных в таблицу:

<html>

<head>

function add ( form ){

table1 = document.getElementById ( 'mytable' ); //получениетаблицыпоимени

row1 = table1.insertRow ( table1.rows.length ); //вставкастрокивтаблицу

cell1 = row1.insertCell ( row1.cells.length ); //вставка 1-ойячейкивстроку

cell1.innerHTML = row1.rowIndex; //добавление номера строки в первую ячейку

cell1 = row1.insertCell ( row1.cells.length ); //вставка 2-ойячейкивстроку

if ( form.info.value != "" ) cell1.innerHTML = form.info.value //вставкаданныхвячейку

else cell1.innerHTML = "default";

cell1 = row1.insertCell ( row1.cells.length ); //вставка 3-ейячейкивстроку

cell1.innerHTML = "<input type=\"checkbox\" name=\"check\">"; //добавлениечекбоксавячейку

}

function del ( form ){

table1 = document.getElementById ( 'mytable' ); //получениетаблицыпоимени

var i = table1.rows.length; //получение кол-ва строк в таблице

while ( i --){ //цикл перебора строк

var row1 = table1.rows [ i ] //получение текущей строки

if ( row1.cells [ 2 ]. childNodes [ 0 ]. checked ){ //если отмечен чекбокс текущей строки

table1.deleteRow ( row1.rowIndex ); //удалитьтекущуюстроку

}

</script>

</head>

<body>

Таблица:

<tableid= "mytable" border= "1" >

<tr>

<th> Номер </th>

<th> Значение </th>

<th> Отметить </th>

</tr>

<table>

<br>

<form>

<inputtype= "text" name= "info" >

<inputtype= "button" onclick= "add(this.form)" value= " Добавить " /><br>

<inputtype= "button" onclick= "del(this.form)" value= " Удалитьотмеченные " />

</form>

</body>

</html>

http://javascript.ru/forum/events/4237-dinamicheskoe-udalenie-strok-tablicy.html

http://javascript.ru/forum/events/2799-problemy-s-insertrow-i-insertcell.html

Работа с фреймами в DOM

Для того, чтобы обратиться из сценария JavaScriptк элементу с указанием конкретного фрейма, в котором он находится, можно использовать свойство parentобъекта window. Все фреймы окна находятся в коллекции framesи нумеруются начиная с 0:

window.parent.frames[0].document.getElementById(My_elem)