Создание и модификация узлов
createElement и appendChild
createElement - создает узел по названию тега
appendChild - переносит узел внутрь другого узла(см пример)
var btn = document.createElement("BUTTON"); // Создаем элемент <button>
var t = document.createTextNode("CLICK ME"); // Создаем текстовый узел
btn.appendChild(t); // Добавляем текст в кнопку <button>
document.body.appendChild(btn); // Добавляем <button> в <body>
Обратите внимание, что если мы работаем с уже созданными элементами, то они просто переносятся, без создания копии!
http://www.w3schools.com/jsref/met_document_createelement.asp
Наполнение элементов
Созданный с помощью createElement элемент можно наполнять через стандартные свойства DOM-объекта.
var banner = document.createElement('DIV');
banner.className = 'block';
banner.innerHTML = 'Летающий банер';
banner.style.position = 'fixed';
banner.style.top = '200px';
banner.style.left = '300px';
insertBefore
insertBefore, - добавляет элемент в список дочерних элементов родителя перед указанным элементом.
<div id="parentNode">
<span id="childNode">foo bar</span>
</div>
<script>
//Создаем новый узел
var newNode = document.createElement("span");
//Добавляем перед childNode новый узел
parentNode.insertBefore(newNode,childNode);
</script>
removeChild - удаляет заданный узел из родительского узла https://developer.mozilla.org/ru/docs/Web/API/Node/removeChild
Удаление элемента без указания его родителя
var node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
cloneNode
https://developer.mozilla.org/ru/docs/Web/API/Node/cloneNode
<div id="outer">
<div id="inner">
</div>
</div>
<div id="outer2">
</div>
Если мы сделаем appendChild без клонирования, то получим следующую ситуацию
var inner = document.getElementById("inner");
var outer2 = document.getElementById("outer2");
outer2.appendChild(inner);
<div id="outer">
</div>
<div id="outer2">
<div id="inner">
</div>
</div>
Воспользуемся клонированием
var inner = document.getElementById("inner");
var clone = inner.cloneNode();
var outer2 = document.getElementById("outer2");
outer2.appendChild(clone);
<div id="outer">
<div id="inner">
</div>
</div>
<div id="outer2">
<div id="inner">
</div>
</div>
insertAdjacentHTML() https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Работа с атрибутами
setAttribute - устанавливает атрибут в элементе
https://developer.mozilla.org/ru/docs/Web/API/Element/setAttribute
Например, есть у нас кнопка
<button>Hello World</button>
с помощью javascript'a сделаем ее неактивной
var b = document.querySelector("button");
b.setAttribute("disabled", "disabled");
getAttribute() - возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка);
https://developer.mozilla.org/ru/docs/Web/API/Element/getAttribute
<input type="text" placeholder="здесь могла быть Ваша реклама">
var b = document.querySelector("input");
var res = b.getAttribute("placeholder");
console.log('и '+res);//и здесь могла быть Ваша реклама
hasAttribute - проверяет установлен ли атрибут. Возвращает true или false, в зависимости установлен наш атрибут в элементе или нет
<input type="checkbox" checked>
var b = document.querySelector("input");
b.hasAttribute("checked");
removeAttribute - удаляет атрибут у элемента
<input type="checkbox" checked>
var b = document.querySelector("input");
b.removeAttribute("checked");
Практика:
Есть кнопка. При нажатии на нее появляется круг. При клике на любой из созданных кругов, он удаляется.
Даем возможность пользователю добавлять новые элементы в выпадающее меню (ToDo List).
Игра. В произвольном месте экрана появляются кружки - нужно успеть на них кликнуть, чтобы заработать баллы
Есть кнопка. При нажатии на кнопку в документ добавляются кружки.
Сделать так, чтобы в предыдущем задании кружки перекрашивались.
Добавить в предыдущее задание вторую кнопку и блок. При нажатии на кнопку все перекрашенные круги перемещаются в блок.
Сделать телефонный справочник. Есть список людей и их номеров телефонов. Есть форма, которая позволяет добавлять новых людей.
Рядом с каждой записью добавить кнопку удаления.
Добавить возможность редактирования каждой записи.