Динамическое создание html div class из javascript. 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",
Если приходилось когда-нибудь писать 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)
var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;Шаг 1. Подготовьте элементы:
elementParent.insertBefore(newElement, element.nextSibling);Шаг 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 Using the 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 }; // 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("Нативный JS
// get var html = elem.innerHTML; // set elem.innerHTML = "Манипуляции с текстом элементов
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 — узел для вставки
Метод 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.