Как создать элемент html с помощью js. JavaScript: создание DOM фрагментов. Манипуляции с HTML кодом элементов

Если приходилось когда-нибудь писать 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 можно не только находить элементы на странице (о том как это делать читайте ) но также создавать элементы динамически и добавлять их в 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. Это очень просто, но многие новички, как и я раньше, часто путались в этом.

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

Последнее обновление: 1.11.2015

Для создания элементов объект document имеет следующие методы:

createElement(elementName) : создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент

createTextNode(text) : создает и возвращает текстовый узел. В качестве параметра передается текст узла.

var elem = document.createElement("div"); var elemText = document.createTextNode("Привет мир");

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

Для добавления элементов мы можем использовать один из методов объекта Node:

appendChild(newNode) : добавляет новый узел newNode в конец коллекции дочерних узлов

insertBefore(newNode, referenceNode) : добавляет новый узел newNode перед узлом referenceNode

Используем метод appendChild:

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

Первый абзац

Второй абзац

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

Сначала создаем обычный элемент заголовка 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.

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

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

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

Создать необходимый узел, используя один из следующих методов:

• createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
• createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.

Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:

• appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
• insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.

Например:

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

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

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

Создать элемент (узел) LI .

Создать текстовый узел, содержащий текст "Смартфон".

Добавить созданный текстовый узел как последний дочерний узел только что созданному элементу LI

Добавить недавно созданный узел 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 этапа:

Получить существующий узел в дереве.

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

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

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

Задание

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

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

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

Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() или querySelectorAll() .

Вызвать у родительского узла метод 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); }

Задание

Напишите функцию, удаляющую все текстовые узлы у элемента.

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