Чтобы создать новый элемент - используется метод document.createElement(тип). Для того, чтобы элемент увидеть на странице, его необходимо добавить в дерево DOM. Это можно сделать методом appendChild, который в DOM есть у любого элемента.
В следующем примере в конец дерева DOM (в конец страницы) добавляется строка текста:
<html>
<head>
<script>
function go() {
var newDiv = document.createElement("div"); //создание элемента
newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элента
newDiv.style.backgroundColor = "red";
document.body.appendChild(newDiv) //добавление нового элемента в дерево
}
</script>
</head>
<body>
Текст
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
Новый элемент можно добавить не в конец детей, а перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.
<html>
<head>
<script>
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>
<div id="id1">Текст</div>
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя. Если родитель элемента неизвестен, то его легко получить при помощи функции parentNode. Следующий пример реализует добавление элемента и его удаление двумя способами.
<html>
<head>
<script>
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) //удаление элемента как потомка своего родителя
Таблица и ее элементы (строки, столбцы) также являются объектами дерева 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>
<script>
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){ //если отмечен чекбокс текущей строки
