Здравствуйте! С помощью JavaScript можно не только находить элементы на странице (о том как это делать читайте ) но также создавать элементы динамически и добавлять их в DOM. О том как это делать и пойдет разговор в этом уроке.

Для того чтобы создать новый элемент на веб-странице — в объекте document есть следующие методы:

• createElement(elementName) : создает новый элемент в качестве параметра надо передать любой тег html-страницы, возвращает html-элемент
• createTextNode(text) : создает текстовый узел и возвращает его же.

Добавление элемента

Рассмотрим небольшой пример:

Var el = document.createElement("div"); var elText = document.createTextNode("Привет мир");

Как видно из примера переменная elem будет хранить ссылку на новый элемент div. Однако как вы понимаете создания элементов недостаточно, их ведь еще надо добавить на веб-страницу. Ведь когда мы таким образом создаем элементы они как бы находятся в иаком виртуальном пространстве или в памяти ну а для того чтобы их отобразить на веб-странице существуют специальные методы.

Для добавления элементов на веб-страницу используются следующие методы:

• appendChild(newNode) : добавляет новый элемент в конец того элемента у которого был вызван этот метод
• insertBefore(newNode, referenceNode) : добавляет новый узел перед узлом который указан в качестве второго параметра.

Давайте рассмотрим пример присоединения элемента на веб-страницу, используя метод метод appendChild:

Заголовок статьи

Первый абзац

Второй абзац

var article = document.querySelector("div.article"); // создаем элемент var el = document.createElement("h3"); // создаем для него текст var elTxt = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента el.appendChild(elTxt); // добавляем элемент в блок div article.appendChild(el);

В пример был создан обычный элемент заголовка h3 и текстовый узел. Затем текстовый узел добавлен в элемент заголовка. После чего заголовок добавлен в один из элементов веб-страницы, чтобы его можно было увидеть на странице.

Но совсем необязательно для создания текста внутри элемента иметь дополнительный текстовый узел, для этого есть свойство textContent, которое позволяет напрямую присвоить текст элементу.

Var el = document.createElement("h3"); el.textContent = "Привет я заголовок";

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

И давайте также рассмотрим, как этот элемент добавить в начало коллекции дочерних узлов блока div:

Var artDiv = document.querySelector("div.article"); // создаем элемент var el = document.createElement("h2"); // создаем для него текст var eltxt = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента el.appendChild(eltxt); // получаем первый элемент, перед которым будет идти добавление var firstEl = artDiv.firstChild.nextSibling; // добавляем элемент в блок div перед первым узлом artDiv.insertBefore(el, firstEl);

Если вдруг надо добавить новый узел на второе, третье или любое иное место, то надо найти узел, перед которым надо его собственно вставлять, с помощью следующих свойств firstChild/lastChild или nextSibling/previousSibling.

Копирование элемента

Бывают такие ситуации когда элементы довольно сложны по составу, и проще их скопировать. Для этого используется отдельный метод cloneNode().

Var artDiv = document.querySelector("div.article"); // клонируем элемент articleDiv var newArtDiv = artDiv.cloneNode(true); // добавляем в конец элемента body document.body.appendChild(newArtDiv);

В метод cloneNode() в качестве параметра надо передать логическое значение: если передать true, то элемент будет скопирован вместе со всеми дочерними узлами; если передать false — то он будет скопирован без дочерних узлов. В данном примере мы копируем элемент вместе с его содержимым и добавляем в конец веб-страницы.

Удаление элемента

Для того чтобы удалить элемент надо вызвать метод removeChild(). Этот метод удалит один из дочерних узлов:

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

В данном примере удалится первый параграф из блока div

Замена элемента

Для замены одного элемента другим служит метод replaceChild(newNode, oldNode). Этот метод в качестве 1-го параметра принимает новый элемент, который заменяет старый элемент передаваемый в качестве 2-го параметра.

Var artDiv = document.querySelector("div.article"); // находим узел, который будем заменять - первый параграф var old = document.querySelectorAll("div.article p"); // создаем элемент var new = document.createElement("h3"); // создаем для него текст var elemtxt = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента new.appendChild(elemtxt); // заменяем старый узел новым artDiv.replaceChild(new, old);

В данном примере заменяем первый параграф, только что созданным заголовком h2.

ИТОГИ.

Для того чтобы создать элемент используются методы:

document.createElement(tag) — создает новый элемент.

document.createTextNode(text) — создает текстовый узел

Методы для вставки и удаления узлов

• parent.appendChild(el) — добавляет элемент в конец существующего элемента
• parent.insertBefore(el, nextSibling) — вставляет элемент перед существующим элементом
• parent.removeChild(el) — удаляет элемент
• parent.replaceChild(newElem, el) — заменяет один элемент на другой
• parent.cloneNode(bool) — копирует элемент, если параметр bool=true то элемент копируется со всеми дочерними элементами, а если false то без дочерних элементов

Задания Функция вставки элементов

Напишите функцию insertAfter(newEl,oldEl) которая вставляет один элемент после другого в саму функцию в качестве параметров передаются сами элементы.

Если приходилось когда-нибудь писать JavaScript и приходилось в JavaScript’е писать что-то вроде:
var p = document.createElement(«p»);
p.appendChild(document.createTextNode(«Настоящий рыба фиш.»));
var div = document.createElement(«div»);
div.setAttribute("id", "new");
div.appendChild(p);

то это может быть вам полезно.

Проблема: когда создаёшь более, чем один элемент, вложенные друг в друга, код становится очень сложным.

Предлагаю простой инструмент решения задачи - функцию create() (исходник ниже). Например, создаём абзац текста:
var el = create(«p», { }, «Farewell, Love!»);

Или div с параграфом и ссылкой внутри него:
var div = create(«div», { id: «new», style: «background:#fff» },
create(«p», { align: "center" },
«вступление: »,
create("a", { href: «ua.fishki.net/picso/kotdavinchi.jpg » },
«картинка»),
": конец")
);

Или вот, делаем таблицу:
var holder = document.getElementById(«holder2»);
var table;
var td;
holder.appendChild(
table =
create(«table», {id: "ugly", cols:3},
create(«tbody», {},
create(«tr», {},
create(«td», { width: "10%" },
«hello»),
td =
create(«td», { style: "background: #fcc" },
«there»),
create(«td», { Class: "special2" }, «everywhere»)
)
);

Обратите внимание: 1. IE требует tbody элемент, иначе отказывается показывать таблицу.
2. Аттрибут class с чем-то конфликтует, поэтому приходится писать его как Class. Кажется, на результат это влияния не оказывает.
3. table = и tr = в примере позволяют сохранить созданные вложенные объекты для дальнейшей работы с ними.
4. Этот код работает и в IE, и в Mozilla, и в Opera.Сама функцияfunction create(name, attributes) {
var el = document.createElement(name);
if (typeof attributes == "object") {
for (var i in attributes) {
el.setAttribute(i, attributes[i]);

If (i.toLowerCase() == "class") {
el.className = attributes[i]; // for IE compatibility

} else if (i.toLowerCase() == "style") {
el.style.cssText = attributes[i]; // for IE compatibility
}
}
}
for (var i = 2;i < arguments.length; i++) {
var val = arguments[i];
if (typeof val == "string") { val = document.createTextNode(val) };
el.appendChild(val);
}
return el;
}

За идею следует благодарить Ивана Курманова,
Оригинальная статья с работающими примерами:

удалить элемент js (12)

Шаг 1. Подготовьте элементы:

var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;

Шаг 2. Добавить после:

elementParent.insertBefore(newElement, element.nextSibling);

В JavaScript есть insertBefore() , но как я могу вставить элемент после другого элемента без использования jQuery или другой библиотеки?

Прямой JavaScript будет следующим:

Добавить:

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 Using the 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

No sibling after

• First item

Sibling after

• 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 }; // getting required handles var refElem = document.getElementById("pTwo"); var parent = refElem.parentNode; // creating

paragraph three

var txt = document.createTextNode("paragraph three"); var paragraph = document.createElement("p"); paragraph.appendChild(txt); // now we can call it the same way as insertBefore() parent.insertAfter(paragraph, refElem);

paragraph one

paragraph two

Обратите внимание, что расширение DOM может оказаться неправильным решением для вас, как указано в этой статье .

Hovewer, эта статья была написана в 2010 году, и теперь все может быть иначе. Поэтому решите свое.

Позволяет обрабатывать все сценарии

Function insertAfter(newNode, referenceNode) { if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); else if(!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.nextSibling); }; //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 (! Node.prototype.insertAfter) { Node.prototype.insertAfter = function(newNode, referenceNode) { this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); }; }

node1.after(node2) создает ,

где node1 и node2 являются узлами DOM.

В этой записи я хочу рассказать как добавить или удалить элемент из объекта в JavaScript. Это очень просто, но многие новички, как и я раньше, часто путались в этом.

Создадим объект для примера var obj = { name: "alex", last_name: "petrov", website: "сайт", };

У нас есть простой объект, внутри которого есть такие данные как name (имя), last_name (фамилия) и website (сайт). Данные могут быть абсолютно любыми, но в целях этой записи они будут именно такими.

Добавление нового элемента obj.country = "ru"; // добавит новый ключ "country" в объект cо значением "ru" obj["city"] = "Moscow"; // так же добавит новый ключ, только "city" со значением "Moscow"

В коде выше все понятно, но лишь придам ясности: вы можете добавлять новые значения в объект в синтаксисе объекта, используя «.» и ключ или же обычный формат массива. Если вы объявите как массив, то obj все равно остается объектом, так как ранее вы его обозначили именно таким благодаря {} .

Создать объект внутри объекта obj.other_obj = {}; // создадим новое значение other_obj в obj и сделаем его объектом

Теперь добавим туда какие-нибудь данные:

Obj.other_obj.first = "первый ключ нового объекта"; obj.other_obj.second = "второй";

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

Удаление элемента delete obj.name; // возвращает: true

Вы можете воспользоваться delete , которая может удалять элементы из объектов. Весь объект таким образом удалить нельзя, но если вам это нужно, то вы можете сделать так:

Obj = {}; // Сделает объект снова пустым

На этой все, если у вас остались какие-то вопросы по объектам в JavaScript, пишите ниже комментарий, постараюсь вам помочь.

Это четвертая часть постов, посвященная нативным эквивалентам jQuery методов. Вы можете почитать , и прежде чем продолжить.

В данной статье мы рассмотрим способы создания, вставки, перемещения и удаления элементов. И хотя jQuery уже содержит большое количество полезных методов, вы будете удивлены, когда узнаете, что все это можно легко сделать используя родные методы.

Манипуляции с HTML кодом элементов jQuery // get var html = $(elem).html(); // set $(elem).html("New html"); Нативный JS // get var html = elem.innerHTML; // set elem.innerHTML = "New html"; Манипуляции с текстом элементов jQuery // get var text = $(elem).text(); // set $(elem).text("New text"); Нативный JS // get var text = elem.textContent; // set elem.textContent = "New text"; Создание элемента jQuery $(""); Нативный JS document.createElement("div"); Добавляет содержимое в конец элементов jQuery $(parentNode).append(newNode); Нативный JS parentNode.appendChild(newNode); Добавляет содержимое в начало элементов jQuery $(referenceNode).prepend(newNode); Нативный JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // or referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Вставить непосредственно перед элементом Insert directly before an Element jQuery $(referenceNode).before(newNode); Нативный JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // or referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Вставить непосредственно после элемента Insert directly after an Element jQuery $(referenceNode).after(newNode); Нативный JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // or referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Примечание: ‘beforebegin’ и ‘afterend’ будут работать только тогда, когда referenceNode находиться в DOM дереве и имеет родительский элемент.

Посмотрите на следующее:

ReferenceNode.insertAdjacentElement(position, node);

Метод insertAdjacentElement принимает два параметра:

• position — позиция относительно referenceNode , должна быть одной из следующих:
  • ‘beforebegin’ — Перед самим элементом.
  • ‘afterbegin’ — Внутри элемента, перед первым потомком.
  • ‘beforeend’ — Внутри элемента, после последнего потомка.
  • ‘afterend’ — После самого элемента.
• node — узел для вставки

Text Content

Some Text Some Text var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("beforeend", elem2); // result Some TextSome Text

Метод insertAdjacentElement более понятный и интуитивный чем insertBefore метод, но последний лучше поддерживается в старых браузерах.

Многократное добавление элементов

Стоит так же отметить, что добавление элемента к узлу, который находиться в DOM дереве приведет к перерисовке. Это не очень хорошо, потому что браузер должен пересчитать размеры и положение нового элемента, что так же приведет к изменениям потомков элемента, предков и элементов, которые появятся после него в DOM. Если вы добавляете много элементов в DOM, то это может занять некоторое время.

Что бы этого избежать, вы можете сделать добавление с DocumentFragment. Фрагмент документа является объектом document который существует только в памяти, поэтому добавление к нему не будет вызывать никаких перекомпоновок.

Допустим, нам нужно добавить 100 элементов li к ul элементу, который присутствует в DOM дереве:

// Get the element that will contain our items var ul = document.querySelector("ul"); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

В приведенном выше примере li элементы добавляются напрямую к ul элементу, который находиться в DOM дереве, следовательно, приведет к перерисовке на каждой итерации — это 100 изменений!

Давайте найдем лучший способ.

// Get the element that will contain our items var ul = document.querySelector("ul"); // create a document fragment to append the list elements to var docFrag = document.createDocumentFragment(); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

В этом же примере элементы li добавляются к фрагменту документа в памяти, так что перекомпоновка сработает, когда фрагмент добавится к элементу ul. Этот способ уменьшит количество перерисовок от 100 до 1.

Удаление элемента jQuery $(referenceNode).remove(); Нативный JS referenceNode.parentNode.removeChild(referenceNode); // or referenceNode.remove(); // FF 23.0+, 23.0+, Edge (No IE support)