JavaScript – робота з елементами DOM. Створення елемента. JavaScript - DOM: додавання та видалення вузлів Вставка елемента в dom javascript

Якщо вам потрібно створити HTML елемент, і ви не знаєте, як це реалізувати, ви звернулися за адресою. У цій статті буде не тільки розглянуто приклад створення елемента, але й написано універсальну функцію, за допомогою якої ви зможете створити новий елемент, додати йому різні атрибути, заповнити текстом.

Але для початку почнемо з простого. У створенні нового елемента ми будемо використовувати методи об'єкта DOM, а саме:

* document.createElement(param) - цей метод, служить безпосередньо для створення елемента. Як параметр приймає назву створюваного елемента. Повертає посилання на створений елемент.

document.createElement('div'); // Створить елемент div.

* document.appendChild(param) – цей метод, служить додавання елемента в HTML код. Як параметр приймає посилання на створений елемент;

var parent = document.getElementsByTagName("BODY"); //отримуємо посилання на елемент body

var elem = document.createElement('div'); // створить елемент div

parent.appendChild(elem);// додає елемент,де parent це посилання куди буде додано наш елемент, в даному випадку - це тіло body;

* document.createTextNode() - метод служить для розміщення тексту всередині елемента.

Приклад створення елемента.

function createElem() (

Var newP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var text = "текст для вставки";

Var textNode = document.createTextNode(text);

NewP.appendChild(textNode);

Parent.appendChild(newP);

У функції createElem змінна parent є посиланням на елемент(body), у якому буде розміщено новий елемент. Потім створюється новий елемент P, до нього додається атрибути id, class, styl, а також задаються значення цих атрибутів. Потім створюється текстовий вузол з додаванням його в наш новий елемент. Після цього відбувається додавання самого елемента в тіло body. Щоб зробити хворого числа нових елементів доведеться неабияк попрацювати, т.к. можливо, потрібно розмістити їх у різних місцях веб-сторінки, тобто. приєднати до різних елементів.

Приклад створення елемента за допомогою універсальної функції.

Ця функція допоможе створити новий елемент, додати йому різні атрибути, приєднати до нього текстовий вузол, розмістити його до або після вказаного елемента, або замінити елемент на новий створений елемент. Обов'язковим є лише аргумент name.

function createElement(name, attrs, style, text,past_id,position,changed) (

Var parent = document.getElementsByTagName("BODY");

Var e = document.createElement(name);

If (attrs) (

For (key in attrs) (

If (key == "class") (

E.className = attrs;

) else if (key == "id") (

E.id = attrs;

) else (

E.setAttribute(key, attrs);

If (style) (

For (key in style) (

E.style = style;

If (text) (

E.appendChild(document.createTextNode(text));

Parent.appendChild(e);

If(past_id)(

Var old_elem = document.getElementById(past_id);

If(position=="before")(

Parent.insertBefore(e,old_elem)

)else if(position=="after")(

InsertAfter(parent,e,old_elem);

If(changed!="" && changed==true)(

Parent.removeChild(old_elem);

Параметри:

Name – назва елемента;

Attrs - атрибути створюваного елемента;

Style – стилі створюваного елемента;

Text – текс, що вставляється;

Past_id – id елемента, поруч із яким розташовуватиметься наш елемент;

Position - може набувати два значення before,after;

Changed – прапор, який приймає два значення true або false. Якщо цей параметр встановлений у true, то станеться заміна старого елемента на новий;

Як приклад, створимо елемент DIV з атрибутами і замінимо старий елемент на новостворений.

createElement("div",

("class": "myDivCSSClass", "id": "myDivId","align":"center"),

("width": "200px", "height": "250px", "background": "#3B9D00", "color": "#fff"),

"here is my text",

"Test",

"before",

Останнє оновлення: 1.11.2015

Для створення елементів об'єкт document має такі методи:

createElement(elementName) : створює елемент html, тег якого передається як параметр. Повертає створений елемент

createTextNode(text) : створює та повертає текстовий вузол. Як параметр передається текст вузла.

Таким чином, змінна elem зберігатиме посилання на елемент div . Проте створення елементів недостатньо, їх ще треба додати на веб-сторінку.

Для додавання елементів ми можемо використовувати один із методів об'єкта Node:

appendChild(newNode) : додає новий вузол newNode до кінця колекції дочірніх вузлів

insertBefore(newNode, referenceNode) : додає новий вузол newNode перед вузлом referenceNode

Використовуємо метод appendChild:

заголовок статті

Перший абзац

Другий абзац

Спочатку створюємо звичайний елемент заголовка h2 та текстовий вузол. Потім текстовий вузол додаємо елемент заголовка. Потім заголовок додаємо в один із елементів веб-сторінки:

Однак нам необов'язково для визначення тексту всередині елемента створювати додатковий текстовий вузол, тому що ми можемо скористатися властивістю textContent і безпосередньо привласнити текст:

Var elem = document.createElement("h2"); elem.textContent = "Привіт світ";

У цьому випадку текстовий вузол буде створений неявно під час встановлення тексту.

Тепер розглянемо, як аналогічний елемент додати на початок колекції дочірніх вузлів блоку div:

Var articleDiv = document.querySelector("div.article"); // створюємо елемент var elem = document.createElement("h2"); // створюємо йому текст var elemText = document.createTextNode("Привіт світ"); // додаємо текст елемент як дочірнього елемента elem.appendChild(elemText); // отримуємо перший елемент, перед яким буде йти додавання var firstElem = articleDiv.firstChild.nextSibling; // додаємо елемент до блоку div перед першим вузлом articleDiv.insertBefore(elem, firstElem);

Якщо нам треба вставити новий вузол на друге, третє або будь-яке інше місце, то нам треба знайти вузол, перед яким треба вставляти, за допомогою комбінацій властивостей firstChild/lastChild та nextSibling/previousSibling.

Іноді елементи бувають досить складними за складом, і набагато простіше їх скопіювати, ніж за допомогою окремих викликів створювати вміст. Для копіювання вже наявних вузлів об'єкта Node можна використовувати метод cloneNode() :

Var articleDiv = document.querySelector("div.article"); // клонуємо елемент articleDiv var newArticleDiv = articleDiv.cloneNode(true); // додаємо до кінця елемента body document.body.appendChild(newArticleDiv);

У метод cloneNode() як параметр передається логічне значення: якщо передається true, то елемент копіюватиметься з усіма дочірніми вузлами; якщо передається false – то копіюється без дочірніх вузлів. Тобто в даному випадку ми копіюємо вузол з усім вмістом і потім додаємо в кінець елемента body.

Для видалення елемента викликається метод removeChild() об'єкта Node. Цей метод видаляє один із дочірніх вузлів:

Var articleDiv = document.querySelector("div.article"); // знаходимо вузол, який видалятимемо - перший параграф var removableNode = document.querySelectorAll("div.article p"); // видаляємо вузол articleDiv.removeChild(removableNode);

У цьому випадку видаляється перший параграф із блоку div

Для заміни елемента застосовується метод replaceChild(newNode, oldNode) об'єкта Node. Цей метод як перший параметр приймає новий елемент, який замінює старий елемент oldNode, що передається як другий параметр.

Var articleDiv = document.querySelector("div.article"); // знаходимо вузол, який замінюватимемо - перший параграф var oldNode = document.querySelectorAll("div.article p"); // створюємо елемент var newNode = document.createElement("h2"); // створюємо йому текст var elemText = document.createTextNode("Привіт світ"); // додаємо текст елемент як дочірнього елемента newNode.appendChild(elemText); // Замінюємо старий вузол новим articleDiv.replaceChild(newNode, oldNode);

У разі замінюємо перший параграф заголовком h2.

У цьому записі я хочу розповісти, як додати або видалити елемент з об'єкта JavaScript. Це дуже просто, але багато новачків, як і я раніше, часто плуталися в цьому.

У нас є простий об'єкт, у якому є такі дані як name (ім'я), last_name (прізвище) та website (сайт). Дані можуть бути абсолютно будь-якими, але з метою цього запису вони будуть такими.

У коді вище все зрозуміло, але лише надам ясності: ви можете додавати нові значення об'єкт у синтаксисі об'єкта, використовуючи «.» і ключ або звичайний формат масиву. Якщо ви оголосите як масив, то obj все одно залишається об'єктом, тому що раніше ви його позначили саме таким ().

Тепер додамо туди якісь дані:

Obj.other_obj.first = "перший ключ нового об'єкта"; obj.other_obj.second = "другий";

Ми створили два нових значення first і second всередині other_obj.

Ви можете скористатися delete, яка може видаляти елементи з об'єктів. Увесь об'єкт таким чином видалити не можна, але якщо вам це потрібно, ви можете зробити так:

Obj = (); // Зробить об'єкт знову порожнім

На цій усе, якщо у вас залишилися якісь питання по об'єктах JavaScript, пишіть нижче коментар, постараюся вам допомогти.

Крок 1. Підготуйте елементи:

Крок 2. Додати після:

JavaScript має insertBefore() , але як я можу вставити елемент післяіншого елемента без використання jQuery чи іншої бібліотеки?

Додати:

Element.parentNode.insertBefore(newElement, element);

Додати після:

Element.parentNode.insertBefore(newElement, element.nextSibling);

Створивши такі прототипи, ви зможете викликати цю функцію безпосередньо з новостворених елементів.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore (елемент) Прототип

Element.prototype.appendBefore = function (element) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter (element) Prototype

Element.prototype.appendAfter = function (element) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

/* Adds Element BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Adds Element AFTER NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Typical Creation and Setup A New Orphaned Element Object */ var NewElement = document.createElement("div"); NewElement.innerHTML = "New Element"; NewElement.id = "NewElement"; /* Add NewElement BEFORE -OR- AFTER Використовуючи Aforementioned Prototypes */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood ( color: brown; ) #NewElement ( color: green; ) Neighbor 1 Neighbor 2 Neighbor 3

В ідеалі insertAfter повинен працювати аналогічно MDN. У наведеному нижче коді виконуватимуться такі дії:

• Якщо дітей немає, додається новий Node
• Якщо немає посилання Node , додається новий Node
• Якщо після посилання Node Node , додається новий Node
• Якщо після цього посилання Node має нащадків, то новий Node вставлений перед цим рідним братом
• Повертає новий Node

Розширення Node

Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

Один спільний приклад

Node.parentNode.insertAfter(newNode, node);

Код, який виконується

// First extend Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "First new item"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Second new item"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Third new item"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Fourth new item"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); No children No reference node

• First item

• First item

• First item
• Third item

Метод insertBefore() використовується як parentNode.insertBefore(). Тому, щоб наслідувати це і зробити метод parentNode.insertAfter(), ми можемо написати наступний код.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // based on karim79"s solution ); // get required handles var refElem = document. pTwo"); var parent = refElem.parentNode; // creating

paragraph three

paragraph one

параграф два

Зверніть увагу, що розширення DOM може виявитися неправильним рішеннямдля вас, як зазначено у цій статті.

Hovewer, ця стаття була написана в 2010 році і тепер все може бути інакше. Тож вирішіть своє.

Дозволяє обробляти всі сценарії

Function insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild( (!referenceNode.nextSibling) document.body.appendChild(newNode);else referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Цей код працює, щоб вставити елемент посилання відразу після останнього існуючого дочірнього inlining щоб inlining невеликий файл css

Var raf, cb=function()( //create newnode var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css/ style.css"; //insert after the lastnode var nodes=document.getElementsByTagName("link"); //existing nodes var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode.next );); //check before insert try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Я знаю, що це питання вже надто багато відповідей, але ніхто з них не виконав моїх точних вимог.

Мені потрібна функція, яка має абсолютно протилежну поведінку parentNode.insertBefore - тобто вона повинна приймати нульовий referenceNode (який не приймається у відповідь) і де insertBefore буде вставляти в кінець insertBefore які він повинен вставити в початку, тому що в іншому випадку взагалі не було б можливості вставити у вихідне місце з цією функцією; З тієї ж причини insertBefore вставляє в кінці.

Оскільки нульовий referenceNode вимагає, щоб ви insertBefore батька, нам потрібно знати батьківський - insertBefore - це метод parentNode , тому він має доступ до батьківського parentNode таким чином; нашої функції немає, тому нам потрібно передати батьківський елементяк параметр.

Отримана функція має такий вигляд:

Function insertAfter(parentNode, newNode, referenceNode) ( parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: parentNode.firstChild); )

If(!

node1.after(node2) створює ,

де node1 та node2 є вузлами DOM.

На цьому уроці ми навчимося створювати вузли-елементи (createElement) та текстові вузли (createTextNode). А також розглянемо методи, призначені для додавання вузлів до дерева (appendChild, insertBefore) та для видалення вузлів з дерева (removeChild).

Додавання нового вузла до дерева зазвичай здійснюється у 2 етапи:

• createElement() - створює елемент (вузол) з вказаним ім'ям(тегом). Метод createElement(element) має один обов'язковий параметр (element) - це рядок, що містить ім'я створюваного елемента (тега). Вказувати ім'я елемента (тега) у параметрі необхідно великими літерами. Як результат даний методповертає елемент, який було створено.
• createTextNode() - створює текстовий вузол із зазначеним текстом. p align="justify"> Метод createTextNode(text) має один обов'язковий параметр (text) - це рядок, що містить текст текстового вузла. Як результат, цей метод повертає текстовий вузол, який був створений.

Робота з існуючими вузлами методами appendChild() та insertBefore() також здійснюється в 2 етапи:

Наприклад, додати існуючий елемент li , що містить текст "Планшет" на початок списку (при цьому він буде видалений з попереднього місця):

//отримуємо елемент UL, що містить список, за його id var elementUL = document.getElementById("list"); //отримати елемент li, що містить текстовий вузол "Планшет" var elementLI = elementUL.childNodes; //додаємо елемент на початок списку //при цьому буде видалено з вихідного місця elementUL.insertBefore(elementLI,elementUL.firstChild);

• Є два списки у документі. Необхідно перемістити елементи з другого списку до першого.
• Створити список, текстове поле та 2 кнопки. Написати код на мові JavaScript, яка в залежності від натиснутої кнопки додає текст, який знаходиться в текстовому полі, на початок або на кінець списку.

Видалення вузла з дерева здійснюється у 2 етапи:

//Знайти вузол, який ми хочемо видалити var findElement = document.getElementById("notebook"); //викликати у батьківського вузла метод removeChild //і передати йому як параметр знайдений вузол findElement.parentNode.removeChild(findElement);

Наприклад, видалити останній дочірній елемент у елемента, що має id="myID" :

//отримати елемент, що має id="myID" var myID = document.getElementById("myID"); //отримати останній дочірній вузол у елементу myID var lastNode = myID.lastChild; //Т.к. ми не знаємо, чи є останній дочірній вузол елемента елементом, // скористаємося циклом whileдля пошуку останнього дочірнього елемента у елементу myID //поки елемент має вузол і його тип не дорівнює 1 (тобто він не елемент) виконувати while(lastNode && lastNode.nodeType!=1) ( //перейти до попереднього вузла lastNode = lastNode.previousSibling; ) //якщо у вузла myID ми знайшли елемент if (lastNode) ( //то його необхідно видалити lastNode.parentNode.removeChild(lastNode); )

Наприклад, видалити всі дочірні вузли у елемента, що має id="myQuestion" :

//отримати елемент, у якого хочемо видалити всі його дочірні вузли var elementQuestion = document.getElementById("myQuestion"); //поки є перший елемент while (elementQuestion.firstElement) ( // видалити його elementQuestion.removeChild(element.firstChild); )