Javascript добавить новый элемент. Создание, добавление и удаление элементов веб-станицы


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

Добавление узлов к дереву

Добавление нового узла к дереву обычно осуществляется в 2 этапа:

  1. Создать необходимый узел, используя один из следующих методов:
  • createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
  • createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.
  • Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:
    • appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
    • insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.

    Например:

    • Компьютер
    • Ноутбук
    • Планшет

    Рассмотрим более сложный пример, в котором добавим к дереву узел LI , содержащий текстовый узел с текстом "Смартфон", в конец списка ul .

    Для этого необходимо выполнить следующее:

    1. Создать элемент (узел) LI .
    2. Создать текстовый узел, содержащий текст "Смартфон".
    3. Добавить созданный текстовый узел как последний дочерний узел только что созданному элементу LI
    4. Добавить недавно созданный узел LI как последний дочерний узел элемента ul
    //создаём элемент (узел) li var elementLI = document.createElement("li"); //создаём текстовый узел, содержащий текст "Смартфон" var textSmart= document.createTextNode("Cмapтфoн"); //добавляем созданный текстовый узел как последний дочерний элемент к только что созданному элементу LI elementLI.appendChild(textSmart); //получаем элемент, к которому будет добавлен созданный узел li как дочерний var elementUL = document.getElementById("list"); //добавляем созданный элемент li как последний дочерний элемент к UL с id="list" elementUL.appendChild(elementLI);

    Методы appendChild() и insertBefore() при работе с существующими узлами

    Работа с существующими узлами методами appendChild() и insertBefore() также осуществляется в 2 этапа:

    1. Получить существующий узел в дереве.
    2. Указать место, куда необходимо вставить узел, с помощью метода appendChild() или insertBefore() . При этом узел будет удалён из предыдущего места.

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

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

    Задание

    • Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
    • Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.

    Удаление узлов

    Удаление узла из дерева осуществляется в 2 этапа:

    1. Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() или querySelectorAll() .
    2. Вызвать у родительского узла метод removeChild() , которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.
      Метод removeChild() возвращает в качестве значения удалённый узел или null , если узел, который мы хотели удалить, не существовал.

    //найти узел, который мы хотим удалить 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); }

    Задание

    1. Напишите функцию, удаляющую все текстовые узлы у элемента.
    2. Имеется 2 списка (), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.

    • Если приходилось когда-нибудь писать 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;
    }


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

    В этой записи я хочу рассказать как добавить или удалить элемент из объекта в 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, пишите ниже комментарий, постараюсь вам помочь.

    Если вам нужно создать 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",



    удалить элемент 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.