Как добавить элемент в html через js
Добавить элемент в html через js можно с помощью метода document.createElement() . Предположим, что у нас есть следующий html документ:
class="container">Как добавить html через js
Внутрь данного контейнера мы хотим поместить заголовок первого уровня красного цвета с надписью Hello, World!
// получаем контейнер const container = document.querySelector('.container'); // создаем новый элемент - заголовок первого уровня const h1 = document.createElement('h1'); // добавляем класс .red, в котором указан нужный нам цвет текста h1.classList.add('red'); // добавляем нужный текст h1.textContent = 'Hello, World!'; // кладем заголовок в контейнер container.append(h1); Создание и добавление элементов DOM
На этом занятии мы поговорим о том как можно добавлять и удалять элементы в DOM-дереве, то есть, фактически в HTML-документе. И начнем с такого примера. Предположим, мы хотим создать вот такое сообщение:
DOCTYPE html> html> head> title>Уроки по JavaScripttitle> head> style> .msg { width: 400px; margin: 0 auto; text-align: center; background: #20454B; padding: 5px; border-radius: 5px; color: #eee; font-size: 24px; } style> body> div class="msg">Важная информация!div> script> script> body> html>
Но будем это делать посредством JavaScript. Поэтому тег div уберем. Теперь, чтобы создать элемент div, воспользуемся методом
и пропишем его так:
let div = document.createElement('div');
Далее, укажем класс стилей и содержимое:
div.className = "msg"; div.innerHTML = "Важная информация!";
Все, теперь переменная div является объектом для представления тега div с классом msg и строкой «Важная информация!». Но этот объект пока еще не является частью DOM-дерева, а значит, не содержится в HTML-документе. Если мы сейчас обновим страницу, то ничего на ней не увидим.
Для размещения объекта на HTML-странице существует несколько методов. Сейчас мы воспользуемся методом append, который может быть вызван из любого узла DOM-дерева для добавления объекта как дочернего в конец списка. Например, добавим наш div в раздел body:
document.body.append(div);
И если теперь посмотрим структуру HTML-документа, то увидим, что div идет последним в списке дочерних элементов раздела body.
Кроме метода append существуют такие методы вставки:
- node.prepend(. nodes or strings) – вставляет узлы или строки в начало node;
- node.before(. nodes or strings) – вставляет узлы или строки до node;
- node.after(. nodes or strings) – вставляет узлы или строки после node;
- node.replaceWith(. nodes or strings) – заменяет node заданными узлами или строками.
Обратите внимание, что эти методы могут вставлять не только объекты-теги, но и текстовые элементы как строки. Чтобы все было понятнее, рассмотрим работу этих методов на таком примере. Пусть у нас имеется документ:
h1>Солнечная системаh1> ul> li>Солнце li>Меркурий li>Венера li>Земля ul>
И выполним следующие операции:
let list = document.querySelector("ul"); list.before('before'); list.after('after');
В результате до и после списка вставятся текстовые элементы со значениями before и after. Далее:
let li_1 = document.createElement('li'); li_1.innerHTML = "первый элемент"; list.prepend(li_1); let li_2 = document.createElement('li'); li_2.innerHTML = "последний элемент"; list.append(li_2);
будет добавлен первый и последний элемент в список. И, наконец, вот такая операция:
list.replaceWith(document.createElement("hr"), "замена", document.createElement("br"));
заменяет весь список новой информацией: тегом hr, строкой «замена» и тегом br. Вот этот последний пример показывает, что данные методы могут принимать сразу более одного аргумента для вставки нескольких элементов. Методы append/prepend/before/after позволяют также перемещать уже существующие элементы. То есть, когда мы вставляем имеющийся элемент, он автоматически удаляется со своего прежнего места и добавляется в новое. Например, у нас есть исходный список и мы хотим «солнце» поместить после «земли». Это можно сделать так:
let li = document.querySelector("ul.list > li:first-child"); let list = document.querySelector("ul.list"); list.append(li);
В JavaScript помимо создания элементов-тегов с помощью метода createElement можно создавать и текстовые элементы. Для этого следует использовать метод document.createTextNode(text) например, так:
let textNode = document.createTextNode('Текстовый элемент'); document.body.append(textNode);
В результате мы получим простой текст внутри HTML-документа.
insertAdjacentHTML
Рассмотренные выше методы вставки добавляют либо отдельные теги, либо текстовую информацию. Причем, текст вставляется именно как текст, то есть, теги внутри текста будут отображены как текст. Например:
document.body.append("Текст с тегом");
- «beforebegin» – для вставки html непосредственно перед elem;
- «afterbegin» – для вставки html как первого дочернего элемента в elem;
- «beforeend» – для вставки html как последнего дочернего элемента в elem;
- «afterend» – для вставки html непосредственно после elem.
ul> li>Меркурий li>Венера li>Земля ul>
И сделаем такие вставки:
Смотрите как разместились эти элементы. Существует еще два похожих метода, но более специализированных:
- insertAdjacentText(where, text) – для вставки строки текста text;
- insertAdjacentElement(where, elem) – для вставки элемента elem.
Например:
list.insertAdjacentText("beforebegin", "Список планет
");
вставит текст как строку, а
let li = document.createElement("li"); li.innerHTML="Солнце"; list.insertAdjacentElement("afterbegin", li);
добавит соответствующий элемент. Однако, на практике эти два метода почти не применяются. Вместо них удобнее использовать методы append/prepend/before/after просто потому, что легче писать. Если нам нужно удалить какой-либо узел из DOM-дерева, то для этого часто используется метод node.remove() Например, имеется список:
ul class="list"> li>Солнце li>Меркурий li>Венера li>Земля li>Марс ul>
И мы из него хотим из него удалять последние пункты, пока полностью не очистим. Это можно сделать так:
let idRemove = setInterval(function() { let li = document.querySelector("ul.list > li:last-child"); if(li === null) { clearInterval(idRemove); alert("Список удален"); } else li.remove(); }, 500);
cloneNode
Следующий метод cloneNode позволяет создавать клон узла DOM-дерева. Он имеет следующий синтаксис: elem.cloneNode(flDeep); Если flDeep равен true, то создается «глубокий» клон объекта со всеми его свойствами и дочерними элементами. При значении false получаем клон без дочерних элементов. Когда может пригодиться такая операция. Например, у нас есть вот такая таблица:
table border=1 cellpadding="10"> tr>td>Солнцеtd>td>Звездаtd>tr> tr>td>Меркурийtd>td>Планетаtd>tr> table>
Мы хотим добавить в нее еще одну строку с планетой Венерой. Это можно сделать путем клонирования существующей строки и добавления клона в конец таблицы:
let t = document.querySelector("table"); let r = document.querySelector("table>tbody>tr:last-child"); let row = r.cloneNode(true); row.firstChild.innerHTML = "Венера"; t.append(row);
Все, теперь у нас появилась еще одна строчка с Венерой.
DocumentFragment
В JavaScript есть DOM-объект специального вида – DocumentFragment. Он как бы образует фрагмент документа со своим DOM-деревом, то есть, со своим содержимым. Затем, это содержимое можно целиком вставить в любое место HTML-документа. Приведем такой простой пример. Предположим, имеется пустой список:
ul>ul>
И мы хотим в него вставить заготовленный фрагмент списка. Это может выглядеть так:
let fr = new DocumentFragment(); let list=["Меркурий", "Венера", "Земля", "Марс"]; for(let p of list) { let item = document.createElement('li'); item.innerHTML = p; fr.append(item); } let ul = document.querySelector("ul"); ul.append(fr);
Но это лишь пример использования DocumentFragment. В данном конкретном случае все можно реализовать проще:
let list=["Меркурий", "Венера", "Земля", "Марс"]; let ul = document.querySelector("ul"); for(let p of list) { let item = document.createElement('li'); item.innerHTML = p; ul.append(item); }
- parent.appendChild(node) – добавляет элемент в конец списка дочерних элементов;
- parent.insertBefore(node, nextSibling) – вставляет элемент перед nextSibling;
- parent.removeChild(node) – удаляет элемент node (здесь parent является родителем node);
- parent.replaceChild(newElem, node) – заменяет дочерний элемент node на новый newElem.
document.write
Это довольно древний метод, который появился в JavaScript когда даже не было понятия DOM-объектов и DOM-дерева. Данный метод позволяет добавлять HTML-содержимое в то место, где записан и имеет такой синтаксис: document.write(html); Причем, срабатывает этот метод только в момент загрузки страницы. Если вызвать его после загрузки, то все содержимое HTML-документа будет удалено! В качестве примера приведу такую страницу:
h1>Солнечная системаh1> script> document.write('Строка вставленная методом write'
); script> ul> li>Солнце li>Меркурий li>Венера li>Земля ul>
Если же мы выполним этот метод после полной загрузки, то получим следующее:
setTimeout(function() { document.write('Строка вставленная методом write'); }, 500);
Видите? Все содержимое HTML-документа пропало и осталась только эта одна строка. Но, несмотря на все эти особенности, метод document.write иногда применяют для динамического формирования HTML-страницы. Дело в том, что он срабатывает еще до построения DOM-дерева и все что он добавит в документ воспринимается браузером так, словно такая страница изначально была получена с сервера. И, в частности, так можно динамически добавлять теги
Создание html-элементов в JavaScript
В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.
JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.
Создание элемента. Метод document.createElement
Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:
JavaScript
document . createElement ( «тег» ) ;
В этом случае элемент создается только в памяти компьютера и не отображается на странице, пока не будут использованы специальные методы для его вставки в тело документа.
Например, нам необходимо создать элемент- div — частый гость html-страниц. Тогда метод будет использован так:
JavaScript
var div = document . createElement ( «div» ) ;
Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div -a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.
Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):
JavaScript
div . id = «my-div» ;
div . className = «someClass» ;
Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():
JavaScript
div . innerHTML = «Some text with bold text» ;
var text = document . createTextNode ( «Some text» ) ;
div . appendChild ( text ) ;
В первом случае вы можете добавить не только текст, но и любые html-теги.
Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div -у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:
JavaScript
родительский _ элемент . appendChild ( дочерний _ элемент ) ;
Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.
Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement() , причем добавляется он в самый конец родительского элемента.
Например, создадим изображение и добавим его внутрь div-а с :
JavaScript
var picHolder = document . getElementById ( «picHolder» ) ;
var img = document . createElement ( «img» ) ;
img . src = «images/stone3.jpg» ;
picHolder . appendChild ( img ) ;
Здесь должна появиться картинка с камнем
Нажмите на кнопочку, пожалуйста.
Добавить изображение
Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.
Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.
Пример использования метода document.createElement() в виде небольшой игры
В этом примере мы создадим 672 элементов в цикле for() с помощью метода document.createElement() , а затем, используя событие onmouseover, изменим цвет фона каждого из них при наведении курсора. При уведении курсора мыши (событие onmouseout) мы вернем стилевое свойство background к начальному значению.
Используем метод document.createElement() и события onmouseover, onmouseout
display : flex ;
align-items : center ;
justify-content : center ;
flex-wrap : wrap ;
max-width : 600px ;
padding : 15px ;
background-color : #2d2d2d ;
box-shadow : 0 0 2px #000 ;
height : 16px ;
width : 16px ;
margin : 2px ;
transition : 2s ease ;
.square:hover < transition-duration : 0s ; >
const inner = document . querySelector ( ‘.inner’ ) ;
const squareColors = [ ‘#ed220d’ , ‘#b542e5’ , ‘#0d93ed’ , ‘#f2770b’ , ‘#8affbc’ , ‘#f2ff8a’ , ‘#ff38c2’ , ‘#e37f35’ ] ;
const BLOCKS = 672 ;
for ( let i = 0 ; i < BLOCKS ; i ++ ) <
const square = document . createElement ( 'div' ) ;
square . classList . add ( 'square' ) ;
square . addEventListener ( 'mouseover' , ( ) = > setColor ( square ) ) ;
square . addEventListener ( ‘mouseout’ , ( ) = > removeColor ( square ) ) ;
inner . appendChild ( square )
function setColor ( elem ) <
const color = getRandomColor ( ) ;
elem . style . background = color ;
elem . style . boxShadow = ` 0 0 12px $ < color >` ;
function removeColor ( elem ) <
elem . style . background = '#2d2d2d' ;
elem . style . boxShadow = '0 0 4px #000' ;
const getRandomColor = ( ) = > squareColors [ Math . floor ( Math . random ( ) * squareColors . length ) ] ;
Все 672 элемента мы добавляем методом appendChild() в совершенно пустой в html-разметке , доступ к которому дает нам метод document.querySelector() , и получаем с помощью JavaScript поле из клеточек с классом .square .
Обратите внимание, что в этом примере использовано ключевое слово const . С помощью const BLOCKS = 672 мы задаем число квадратов в примере. Вы можете поменять это число, используя код примера. Кроме того, для обработки событий и для получения случайного цвета из массива squareColors мы используем стрелочные функции.
Добавление элементов в блок
Кроме того, что вы можете добавить любые элементы в тело документа, т.е. в document.body, также можно добавить элементы в document.head, то есть в блок . Как правило, в этот блок вставляют тег style , если есть необходимость управлять стилями именно таким образом, а не через свойства style , className или classList .
Использование метода insertBefore
Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:
var insertedElement = родительский _ элемент . insertBefore ( новый _ элемент , существующий _ элемент ) ;
Пример: вставляем текст абзаца в div с после заголовка h2:
JavaScript
var text = document . getElementById ( «text» ) ,
firstParagraph = text . firstElementChild ;
var p = document . createElement ( «p» ) ;
p . innerHTML = «Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Natus pariatur, ipsa dolorum adipisci.» ;
text . insertBefore ( p , firstParagraph ) ;
В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом «Пока это первый абзац».
Пока это первый абзац.
Добавить абзац
Использование метода insertAdjacentHTML и других
Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:
- «beforeBegin» — перед элементом.
- «afterBegin» — внутрь элемента, в самое начало, т.е. сразу за открывающим тегом.
- «beforeEnd» — внутрь элемента, в конец, т.е. перед закрывающим тегом.
- «afterEnd» — после элемента.
Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:
JavaScript
элемент . insertAdjacentText ( строка , «строка текста» ) ;
элемент . insertAdjacentHTML ( строка , код _html ) ;
элемент . insertAdjacentElement ( строка , элемент ) ;
Использовать их нужно в зависимости от потребности.
Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):
Место для вставки текста
Код примера (с одним из вариантов строк):
JavaScript
var h3 = document . getElementById ( «header-text» ) ;
h3 . insertAdjacentText ( «afterEnd» , «Ваш текст» ) ;
А теперь используем вставку кода html:
Дополняемый список
var first = document . getElementById ( «ul-code» ) . firstElementChild ; //первый элемент li списка ul
first . insertAdjacentHTML ( ‘afterBegin’ , htmlCode ) ;
В зависимости от того, какой вариант строки вы выбрали, код будет различаться. И лучше всего это видно в инспекторе свойств браузера. Цвет нового элемента задается случайным образом, и может отличаться от приведенного на картинке.
В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor() :
JavaScript
function randomColor ( ) <
var r = Math . floor ( Math . random ( ) * 256 ) ;
var g = Math . floor ( Math . random ( ) * 256 ) ;
var b = Math . floor ( Math . random ( ) * 256 ) ;
return "rgb(" + r + "," + g + "," + b + ")" ;
var h3Elem = document . getElementById ( "header-elem" ) ;
var elem = document . createElement ( "span" ) ;
elem . innerHTML = "Некая строка" ;
elem . style . color = randomColor ( ) ;
h3Elem . insertAdjacentElement ( "beforeBegin" , elem ) ;
Место для вставки элемента
Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому ��
Замена элемента на другой
Если вы не хотите добавлять новый элемент в структуру уже существующего, вы можете заменить тот, что был на новый методом replaceChild(). Делается это несколько сложновато, т.к. при этом надо обратиться к родительскому элементу (узлу) и указать, что именно внутри него мы меняем на новый элемент какой-то из старых элементов.
Замена элемента
JavaScript
parentElem . replaceChild ( newElem , oldChild )
Рассмотрим пример, в котором нам нужно заменить первый абзац внутри div-а на заголовок 3-го уровня.
Замена одного элемента другим
JavaScript
< p >Lorem ipsum dolor sit amet , consectetur adipisicing elit .
Quo ipsa sunt fugiat , tenetur cumque atque ? < / p >
< p >Voluptates facere fugit itaque fuga libero nisi maxime minima , ad molestias magnam .
Excepturi , quos , ratione . < / p >
let changeDiv = document . getElementById ( ‘changeDiv’ ) ,
headerElem = document . createElement ( ‘h3’ ) ;
headerElem . textContent = ‘Новый заголовок’ ;
function changeElems ( ) <
changeDiv . replaceChild ( headerElem , changeDiv . children [ 0 ] ) ;
Этот пример в действии:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa sunt fugiat, tenetur cumque atque?
Voluptates facere fugit itaque fuga libero nisi maxime minima, ad molestias magnam. Excepturi, quos, ratione.
Как вы, наверное, заметили, ряд методов несколько сложно воспринимается с точки зрения понимания их синтаксиса. Поэтому в совремненном JavaScript чаще используются другие методы, похожие и по названию, и по действию, но со значительно более понятным синтаксисом.
Новые методы вставки элементов в html-разметку
С внедрением стандартов ES5 и ES6 в JavaScript появились новые методы, упрощающие манипуляции со вставкой элементов в html-разметку страницы. Не последнюю роль в этих нововведениях сыграла библиотека jQuery, т.к. в ней такие методы были реализованы уже очень давно.
Например, вместо метода appendChild() мы можем применить метод append() — и элемент появится в самом низу родительского элемента. И это еще не все. Рассмотрим новые методы:
- elem.append(узлы или строки) – добавляет узлы или строки в конец элемента elem ,т.е. после последнего его дочернего элемента, если таковой есть;
- elem.prepend(узлы или строки) – добавляет узлы или строки в начало elem , т.е. перед первым его дочерним элементом, если таковой есть;
- elem.before(узлы или строки) – вставляет узлы или строки до elem , т.е. перед самим элементом, а не внутри него;
- elem.after(узлы или строки) – добавляет узлы или строки после elem , т.е. не внутрь элемента, а сразу за ним;
- elem.replaceWith(узлы или строки) – заменяет elem заданными узлами или строками, замещая его содержимое.
В примере ниже вы можете выбрать любой из перечисленных методов и посмотреть, как он работает.
За счет того, что родительский элемент с блоками имеет свойство display: flex , и строки, и новый блок размещаются в виде новой колонки. Но при использовании любого метода для блока, он перемещается, т.к. ни один из методов не предполагает клонирования блока. Он как бы переносится из одного места в другое, когда вы после использования метода append() решаете посмотреть на действие метода prepend() или after() для элемента. При использовании этих же методов для строк текст строки присоединяется заново в соответствующем названию метода месте.
Обратите внимание, что метод replaceWith() заменяет элемент на указанный в скобках другой элемент или строку, и после этого другие методы не работают. Поэтому нажмите на кнопку «Обновить», если хотите еще раз попробовать применить все методы.
Код примера с новыми методами:
Как вставить html в методами js, храня этот html в отдельном файле templates?
Нужно что б по нажатию на соответсвующюю кнопку в #box добавлялся соответствующий html контент.
сейчас это реализовано так:
$("#box").append(" ");Есть много таких дивов которые надо вставлять по нажатию на соответствующие кнопки. Хотелось бы не нагружать js и описать эти дивы где то в другом файле template. Что б добавление выглядело так
где headline в другом файле
var headline = " "- Вопрос задан более трёх лет назад
- 17502 просмотра
1 комментарий
Оценить 1 комментарий