Javascript - DOM манипуляция

Основным объектом является объект Document, который, в свою очередь, содержит несколько других дочерних объектов. Каждый элемент в документе будет иметь соответствующее присутствие в дереве DOM. Объект документа - это встроенный объект, который имеет множество свойств и методов, которые мы можем использовать для доступа и изменения веб-сайтов.
Создайте элемент DOM
Чтобы создать новые элементы в DOM, он предоставляет общий метод createElement(), который принимает в качестве аргумента имя тега HTML и возвращает простой узел DOM указанного типа.
Пример:
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col1">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">Create New</button>
<script>
function doIt() {
var newNode=document.createElement("LI");
var txt=document.createTextNode("Thursday");
newNode.appendChild(txt);
document.getElementById("days").appendChild(newNode);
}
</script>
</body>
</html>
Выше JavaScript-программы сначала создают узел LI, затем он разбивает текстовое поле для отображения текста, а затем добавляет текстовый узел к новому элементу LI, и, наконец, новый узел добавляется к существующим «дням».
insertBefore (element, targetNode)
Метод Node.insertBefore() вставляет узел перед ссылочным узлом в качестве дочернего элемента указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, insertBefore() перемещает его из текущего положения в новое положение.
Пример:
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">insertBefore</button>
<script>
function doIt() {
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Sunday");
newItem.appendChild(textnode);
var list = document.getElementById("days");
list.insertBefore(newItem, list.childNodes[0]);
}
</script>
</body>
</html>
AppendChild (элемент)
Метод Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, appendChild() перемещает его из текущей позиции в новую позицию.
Пример:
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">appendChild</button>
<script>
function doIt() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Thursday");
node.appendChild(textnode);
document.getElementById("days").appendChild(node);
}
</script>
</body>
</html>
Модифицирующий узел
Вы можете изменять существующие элементы в DOM, изменяя их свойства, контент, стиль или даже полностью перемещая их из одного места в DOM в другое.
Изменить содержимое
Свойство Element innerHTML используется для получения или установки строки, представляющей сериализованный HTML, описывающий потомков элемента. Он не возвращает HTML-разметку. Когда вы устанавливаете контент с помощью этого метода, он удаляет все содержимое узла и вставляет предоставленный текст.
Пример:
<!DOCTYPE html>
<html>
<body>
<p id="heading">This will Change....</p>
<button onclick="doIt()">Modify Above Text</button>
<script>
function doIt() {
var txt = document.getElementById('heading').innerHTML; alert(txt);
document.getElementById('heading').innerHTML = "Its Changed.....";
}
</script>
</body>
</html>
Изменение стилей
Свойство HTMLElement.style используется так же, как и для встроенного стиля элемента. При получении он возвращает объект CSSStyleDeclaration, который содержит список всех свойств стилей для этого элемента со значениями, назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента.
Пример:
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">This will change to red...<h1>
<button onclick="doIt()">Modify Above Text</button>
<script>
function doIt() {
var txt = document.getElementById('heading').style.color="red";
}
</script>
</body>
</html>
Удаление узлов
Подобно модификации DOM, он также позволяет удалять целевые узлы. Метод removeChild() удаляет целевой объект из родительского узла.
Пример:
<!DOCTYPE html>
<html>
<body>
<p>Days:</p>
<ul id="days">
<li id="col2">Sunday</li>
<li id="col2">Monday</li>
<li id="col3">Tuesday</li>
<li id="col3">Wednesday</li>
</ul>
<button onclick="doIt()">Remove</button>
<script>
function doIt() {
var list = document.getElementById("days");
list.removeChild(list.childNodes[0]);
}
</script>
</body>
</html>
Еще есть функция prependChild() чтобы добавить впереди)) кому интересно