Морозов Андр ій Васильович, к.т.н, доц., декан факультету інформаційно- комп ’ ютерних технологій ЖДТУ
Створення DOM- елемента: document.createElement (" тег ") Створення текстового вузла : document.createTextNode (" текст ") Додавання вузла у DOM як доч ірнього тега : parentElem.appendChild ( elem ) Тут: parentElem – батьківський елемент, у який додається елемент elem. Елемент дода ється у кінець. Додавання вузла у DOM як лівого сусіда : parentElem.insertBefore ( elem, nextElem ) Тут: parentElem – батьківський елемент, у який додається елемент elem ; nextElem – елемент, перед яким дода ється елемент elem
Приклад 1. HTML: <div id="container"> <p> Абзац 1 </p> <p> Абзац 2 </p> </div> JavaScript: var div = document.createElement ('div'); div.className = "alert big"; div.innerHTML = " Помилка при введенні e-mail"; document.getElementById ("container"). appendChild (div) Додається у контейнер : <div id="container"> <p> Абзац 1 </p> <p> Абзац 2 </p> <div class="alert big"> Помилка при введенні e-mail </div> </div> Створюється в пам ’ яті: <div class="alert big"> Помилка при введенні e-mail </div>
Приклад 2. HTML: <ol id="list"> <li>0</li> <li>1</li> <li>2</li> </ol> JavaScript: var list = document.getElementById ('list'); var newLi = document.createElement ('li'); newLi.innerHTML = ' Новий пункт!'; list.insertBefore ( newLi, list.children [1]); Створюється в пам ’ яті: <li> Новий пункт! </li> Додається у DOM- структуру : <ol id="list"> <li>0</li> <li> Новий пункт! </li> <li>1</li> <li>2</li> </ol>
Створення копії DOM- вузла (разом з вкладеними вузлами): elem.cloneNode (true) Створення копії DOM- вузла (без вкладених вузлів): elem.cloneNode (false) Видалення DOM- вузла : parentElem.removeChild ( elem ) Зам іна дочірнього елементу: parentElem.replaceChild ( newElem, elem )
Приклад. var div = document.createElement ('div'); div.className = "alert alert-success"; div.innerHTML = "<strong> Ура!</ strong> Є нове повідомлення."; document.body.insertBefore (div, document.body.firstChild ); // створити копію вузла var div2 = div.cloneNode (true); // в поп ію можна вносити зміни div2.querySelector('strong'). innerHTML = ' Супер!'; // і додати її у DOM- стуктуру div.parentNode.insertBefore (div2, div.nextElementSibling ); HTML: <body> <h3> Заголовок </h3> </body> 1. У пам ’ ят і створюється div: <div class="alert alert-success"> <strong> Ура!</ strong> Є нове повідомлення. </div> 2. div дода ється перед тегом h3: <body> <div class="alert alert-success"> <strong> Ура!</ strong> Є нове повідомлення. </body> <h3> Заголовок </h3> </body> 3. У пам ’ ят і створюється копія div- блоку <div class="alert alert-success"> <strong> Ура!</ strong> Є нове повідомлення. </div> 4. У копію div- блоку вносяться зміни <div class="alert alert-success"> <strong> Супер! </ strong> Є нове повідомлення. </div> 5. Змінена копія div- блоку дода ється у DOM- структуру <body> <div class="alert alert-success"> <strong> Ура!</ strong> Є нове повідомлення. </div> <div class="alert alert-success"> <strong> Супер!</ strong> Є нове повідомлення. </div> <h3> Заголовок </h3> </body>
