В тази публикация искам да ви кажа как да добавите или премахнете елемент от обект в JavaScript. Много е просто, но много начинаещи, като мен преди, често се объркват от това.

Нека създадем примерен обект

var obj = ( име: "алекс", фамилия: "петров", уебсайт: "сайт", );

Имаме прост обект, вътре в който има данни като name (първо име), last_name (фамилия) и уебсайт (уебсайт). Данните могат да бъдат абсолютно всякакви, но за целите на този запис ще бъдат точно това.

Добавяне на нов елемент

obj.country = "bg"; // добавяне нов ключ"страна" в обект със стойност "ru" obj["city"] = "Москва"; // също ще добави нов ключ, само "град" със стойност "Москва"

Всичко е ясно в кода по-горе, но само за да бъде ясно: можете да добавите нови стойности към обект в синтаксиса на обекта, като използвате "." и ключ или обичайния формат на масив. Ако го декларирате като масив, тогава obj все още е обект, тъй като преди това сте го обозначили по този начин благодарение на ().

Създайте обект в обект

obj.other_obj = (); // създайте нова стойност other_obj в obj и я направете обект

Сега нека добавим някои данни там:

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

Създадохме две нови стойности първа и втора вътре в other_obj.

Премахване на елемент

изтриване на obj.name; // връща true

Можете да използвате delete , което може да премахва елементи от обекти. Не можете да изтриете целия обект по този начин, но ако имате нужда, можете да направите следното:

obj = (); // Прави обекта отново празен

Това е всичко, ако все още имате въпроси относно обектите в JavaScript, напишете коментар по-долу, ще се опитам да ви помогна.

премахване на 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(новЕлемент, елемент);

Добавете след:

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

Но добавете някои прототипи там за по-лесно използване

Чрез създаването на следните прототипи ще можете да извиквате тази функция директно от новосъздадените елементи.

newElement.appendBefore(елемент);

newElement.appendAfter(елемент);

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

Element.prototype.appendBefore = функция (елемент) ( element.parentNode.insertBefore(this, element); ),false;

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

Element.prototype.appendAfter = функция (елемент) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

И за да видите всичко в действие, изпълнете следния кодов фрагмент

/* Добавя елемент ПРЕДИ NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Добавя елемент СЛЕД NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Типично създаване и настройка на нов осиротел елементен обект */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Нов елемент"; NewElement.id = "Нов елемент"; /* Добавяне на NewElement ПРЕДИ -ИЛИ- СЛЕД използването на гореспоменатите прототипи */ NewElement.appendAfter(document.getElementById("Neighbor2")); div (text-align: center;) #Neighborhood (цвят: кафяв;) #NewElement (цвят: зелен;)

В идеалния случай insertAfter трябва да работи подобно на MDN. Кодът по-долу ще направи следното:

• Ако няма деца, се добавя нов възел
• Ако няма референтен възел, се добавя нов възел
• Ако след референтния възел Node се добавя нов възел
• Ако след това референтният възел има деца, тогава новият възел се вмъква преди този брат или сестра
• Връща нов възел

Разширение на възел

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

Един често срещан пример

Node.parentNode.insertAfter(нов възел, възел);

Вижте изпълнявания код

// Първо разширете 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 = "Първи нов елемент"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Втори нов елемент"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Трети нов елемент"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Четвърти нов елемент"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode);

без деца

Няма референтен възел

• Първи елемент

без брат и сестра след

• Първи елемент

Брат и сестра след

• Първи елемент
• Трети елемент

Методът insertBefore() се използва като parentNode.insertBefore(). За да емулираме това и да направим метода parentNode.insertAfter(), можем да напишем следния код.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // базирано на решението на karim79); // получаване на необходимите манипулатори var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // създаване

параграф трети

var txt = document.createTextNode("параграф три"); var параграф = document.createElement("p"); параграф.appendChild(txt); // сега можем да го извикаме по същия начин като insertBefore() parent.insertAfter(paragraph, refElem);

Моля, имайте предвид, че разширяването на DOM може да не е правилното решение за вас, както е посочено в тази статия.

Въпреки това, тази статия е написана през 2010 г. и сега нещата може да са различни. Така че решете вашето.

Позволява обработка на всички сценарии

Функция 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); )

Този код работи за вмъкване на елемент на връзка точно след последното съществуващо дъщерно вграждане за вмъкване на малък css файл

Var raf, cb=function()( //създайте нов възел var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css/ style.css"; //вмъкнете след последния възел var nodes=document.getElementsByTagName("link"); //съществуващи възли var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode.nextSibling ); ); //проверете преди вмъкване опитайте ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Знам, че този въпрос вече има твърде много отговори, но нито един от тях не отговаря на точните ми изисквания.

Имам нужда от функция, която има точно обратното поведение на parentNode.insertBefore- т.е. трябва да приеме null referenceNode (който не се приема в отговор) и където insertBefore ще вмъкне в край insertBefore, в който трябва да се вмъкне рано, тъй като в противен случай изобщо не би имало начин да поставите на първоначалното място с тази функция; по същата причина insertBefore вмъква в края.

Тъй като null referenceNode изисква да insertBefore родителя, ние трябва да знаем родителя - insertBefore е метод parentNode, така че има достъп до parentNode на родителя по този начин; нашата функция не съществува, така че трябва да предадем родителския елемент като параметър.

Получената функция изглежда така:

Функция 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 можете не само да намирате елементи на страницата (прочетете как да направите това), но и да създавате елементи динамично и да ги добавяте към DOM. Как да направите това ще бъде обсъдено в този урок.

За да създадете нов елементна уеб страница обектът документ има следните методи:

• createElement(elementName): създава нов елемент, всеки таг на html страница трябва да бъде предаден като параметър, връща html елемент
• createTextNode(текст): създава текстов възел и го връща.

Добавяне на елемент

Помислете за малък пример:

Varel = document.createElement("div"); var elText = document.createTextNode("Здравей свят");

Както можете да видите от примера, променливата elem ще съхранява препратка към новия елемент div. Въпреки това, както разбирате, създаването на елементи не е достатъчно, защото те все още трябва да бъдат добавени към уеб страницата. В крайна сметка, когато създаваме елементи по този начин, те изглеждат като в някакво виртуално пространство или в паметта, но за да ги покажем на уеб страница, има специални методи.

Следните методи се използват за добавяне на елементи към уеб страница:

• appendChild(нов възел): добавя нов елемент в края на елемента, на който е извикан този метод
• вмъкниПреди (нов възел, референтен възел): добавя нов възел преди възела, даден като втори параметър.

Нека да разгледаме пример за прикачване на елемент към уеб страница с помощта на метода appendChild:

В примера бяха създадени нормален h3 заглавен елемент и текстов възел. След това текстовият възел се добавя към заглавния елемент. След това заглавието се добавя към един от елементите на уеб страницата, така че да може да се вижда на страницата.

Но не е необходимо да имате допълнителен текстов възел, за да създадете текст вътре в елемент, за това има свойство textContent, което ви позволява директно да присвоите текст на елемент.

Var el = document.createElement("h3"); el.textContent = "Здравейте, аз съм заглавие";

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

И нека също да разгледаме как да добавим този елемент към горната част на колекцията от дъщерни възли на div:

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

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

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

Има ситуации, когато елементите са доста сложни по състав и е по-лесно да ги копирате. За това се използва отделен метод cloneNode().

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

Методът cloneNode() трябва да бъде предаден като параметър булево: ако подадете true, тогава елементът ще бъде копиран заедно с всички дъщерни възли; ако подадете false, то ще бъде копирано без дъщерни възли. AT този примеркопираме елемента заедно със съдържанието му и го добавяме в края на уеб страницата.

Премахване на елемент

За да премахнете елемент, извикайте метода removeChild(). Този метод ще премахне един от дъщерните възли:

VarartDiv = document.querySelector("div.article"); // намиране на възела за премахване - първият параграф var removNode = document.querySelectorAll("div.article p"); // премахване на възел artDiv.removeChild(removNode);

Този пример ще премахне първия параграф от блока div.

Подмяна на елемент

За да замените един елемент с друг, използвайте метода replaceChild(newNode, oldNode). Този метод приема нов елемент като 1-ви параметър, който замества стария елемент, предаден като 2-ри параметър.

VarartDiv = document.querySelector("div.article"); // намиране на възела за замяна - първият параграф var old = document.querySelectorAll("div.article p"); // създаване на елемент var new = документ. createElement("h3"); // създаване на текст за него var elemtxt = document.createTextNode("Hello world"); // добавяне на текст към елемента като дете new.appendChild(elemtxt); // замени стар възелнов artDiv.replaceChild(нов, стар);

В този пример заместваме първия параграф с новосъздаденото заглавие h2.

РЕЗУЛТАТИ.

За създаване на елемент се използват следните методи:

document.createElement(етикет)- създава нов елемент.

document.createTextNode(текст)- създава текстов възел

Методи за вмъкване и премахване на възли

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

Задачи

Функция за вмъкване на елементи

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