Створення, додавання та видалення елементів веб-сторінки. Створення, додавання та видалення елементів HTML сторінки Як створити елемент html за допомогою js

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

Створимо об'єкт для прикладу

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

Додавання нового елемента

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

Створити об'єкт усередині об'єкту

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

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

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

Видалення елемента

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

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

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

Доброго дня! За допомогою 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:

Прикладом було створено звичайний елемент заголовка 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). Цей метод як один параметр приймає новий елемент, який замінює старий елемент переданий як другий параметр.

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) яка вставляє один елемент після іншого в саму функцію як параметри передаються самі елементи.

видалити елемент js (12)

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

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

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 Використовуючи Aforementioned Prototypes */ NewElement.appendAfter(document.getElementById("Neighbor2")); div (text-align: center; ) #Neighborhood ( color: brown; ) #NewElement ( color: green; )

В ідеалі 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 ); // get required handles var refElem = document. pTwo"); var parent = refElem.parentNode; // creating

paragraph three

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

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

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

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

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

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

Якщо вам потрібно створити 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,style,а також задаються значення цих атрибутів. Потім створюється текстовий вузол з додаванням його в наш новий елемент. Після цього відбувається додавання самого елемента в тіло 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",

Якщо доводилося коли-небудь писати 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")
)
);

Зверніть увагу:

Сама функція