Как добавить html код через js

Как в JS вставить разметку HTML?

Так оно почему-то не работает, а как правильно, чтобы потом подключил этот файл и оно читало разметку?

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 15 янв 2015 в 19:42
117 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 15 янв 2015 в 20:07
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
jsfiddle.net/aqjLk2yk/1 можно ещё один вариант, пригодится
15 янв 2015 в 20:28

Надо значение этой переменной as как-то вставить в нужном месте документа. Например, если там есть пустой с известным id , то можно так (пример 1):

document.getElementById("mesto").innerHTML = as; 

Или можно, например, в конец документа, или известного элемента, добавить свежесозданный с вашим html (пример 2):

var div = document.createElement("DIV"); div.innerHTML = as; document.getElementsByTagName('body')[0].appendChild(div); 

jQuery облегчает эту же задачу. Те же два способа будут выглядеть по одной строке:

$("#mesto").html(as); // в элемент с // или $("body").append(as); // в конец документа, не оборачивая в доп. div 

Если HTML много, в несколько строк, можно его обернуть в отдельный тег с id:

Как добавить html код через js

JavaScript предоставляет ряд методов для управления элементами на веб-страницы. В частности, мы можем создавать и добавлять новые элементы или заменять и удалять уже имеющиеся. Рассмотрим эти методы.

Создание элементов

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

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

Создадим элемент с помощью createElement :

const header = document.createElement("h1"); // создаем заголовок console.log(header); //

Таким образом, переменная header будет хранить ссылку на элемент h1 .

Создадим текстовый узел с помощью createTextNode :

const headerText = document.createTextNode("Hello World"); // создаем текстовый узел console.log( headerText); // "Hello World"

Добавление элементов

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

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

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

appendChild

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

const header = document.createElement("h1"); // создаем заголовок 
const headerText = document.createTextNode("Hello World"); // создаем текстовый узел header.appendChild( headerText); // добавляем в элемент h1 текстовый узел console.log(header); // 
Hello World
 

И чтобы добавить созданный элемент на страницу, его надо добавить в уже имеющийся на странице элемент:

Сначала создаем обычный элемент заголовка h2 и текстовый узел. Затем текстовый узел добавляем в элемент заголовка. Затем заголовок добавляем в элемент body :

Стоит отметить, что нам необязательно для определения текста внутри элемента создавать дополнительный текстовый узел, так как мы можем воспользоваться свойством textContent и напрямую ему присвоить текст:

const header = document.createElement("h1"); // создаем заголовок header.textContent = "Hello World"; // определяем текст элемента

В этом случае текстовый узел будет создан неявно при установке текста.

insertBefore

Метод appendChild() добавляет элемент в конец контейнера. Чтобы более конкретизировать место для добавления, можно использовать другой метод — insertBefore() , который добавляет один элемент перед другим элементом. Например, у нас есть следующая страница:

      
Text 1
 
Text 2
   

Допустим, нам надо добавить в элемент body перед первым параграфом заголовок. Мы можем сделать это так:

      
Text 1
 
Text 2
   

Если нам надо вставить новый узел на второе, третье или любое другое место, то нам надо найти узел, перед которым надо вставлять, с помощью комбинаций свойств firstElementChild/lastElementChild и nextSibling/previousSibling.

Копирование элемента

Иногда элементы бывают довольно сложными по составу, и гораздо проще их скопировать, чем с помощью отдельных вызовов создавать из содержимое. Для копирования уже имеющихся узлов у объекта Node можно использовать метод cloneNode() :

       
Home Page
 
Text 1
 
Text 2
 
    

В метод cloneNode() в качестве параметра передается логическое значение: если передается true, то элемент будет копироваться со всеми дочерними узлами; если передается false — то копируется без дочерних узлов. То есть в данном случае мы копируем узел со всем его содержимым и потом добавляем в конец элемента c .

Замена элемента

Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node. Этот метод в качестве первого параметра принимает новый элемент, который заменяет старый элемент oldNode, передаваемый в качестве второго параметра.

       
Home Page
 
Text 1
 
Text 2
 
    

В данном случае заменяем первый элемент — первый параграф заголовком h2:

Удаление элемента

Для удаления элемента вызывается метод removeChild() объекта Node. Этот метод удаляет один из дочерних узлов:

       
Home Page
 
Text 1
 
Text 2
 
    

В данном случае удаляется первый параграф из блока div

Удаление всех элементов

Иногда возникает необходимость удалить все элементы. Для этого перебираем все элементы контейнера и удаляем их:

const article = document.getElementById(«article»); while(article.firstChild)

Как можно вставить большой кусок Html кода через JS опять же в Html код?

Суть в том, что нужно вставить довольно большой кусок html кода через javascript, то есть переписывать все это заново долго и бессмысленно. При попытке вставить через innerHtml он протестует ибо это только для одной строки

• Вопрос задан более трёх лет назад
• 4350 просмотров

3 комментария

Оценить 3 комментария

>innerHtml он протестует ибо это только для одной строки
Шта? Сами придумали, или кто надоумил?

Евгений Стек @Gared Автор вопроса

Виталий Инчин ☢: во всяком случае мне выдавало ошибку и сказали так. Как тогда вставить много текста, если можно?

Евгений Стек: никаких ошибок не должно возникать при использовании innerHTML. Дайте пример ошибка на jsfiddle.

Решения вопроса 0
Ответы на вопрос 6
Использовать ajax. Получить по запросу нужный html и заменить или добавить.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

JavaScripter
Есть document.createElement. Вот в этом направление нужно копать. Помочь?
Ответ написан более трёх лет назад
Ну если хотим пегрузить страницу избыточными данными то можно и так.

look2009: какими избыточными данными? А? AJAX, к твоему сведению, еще худший вариант — и интернет тратит, и весит не намного легче

Евгений Стек @Gared Автор вопроса

Dark Hole там классов 10 и у каждого внутри еще всякие `шки и подобное, как то не очень писать это все руками. + там сильно будет грузить устройство юзера

Евгений Стек: не вижу выхода. Либо jQuery — для простоты работы. Либо нативный JS. Если содержимое строго определено — innerHTML поможет. Насчет нагрузки — если не делать это каждые полсекунды — врядли особо грузить будет. только вставлять нужно всем скопом

Dark Hole: Аякс в данном случае лучшее зло, т.к. идёт выборка данных для каждого id по необходимости. Человек же написал большой html в разных id, т.е. есть условия, проще скрипт написать который по условиям будет фильтровать и ответ отдавать.

look2009: но мой способ быстрее. И постоянное обращение к серверу по мелочам, быстро исчерпает ОЗУ сервера

Dark Hole: > AJAX . интернет тратит
За счет чего бы то?

> идёт выборка данных для каждого id по необходимости
Причем здесь какой-то id?

> быстро исчерпает ОЗУ сервера
На сервере утечка памяти?

VZVZ: 2ой вопрос это не ко мне. Представь себе, если будут бомбардировать Ajaxсом все время — это нагрузка раза в 2 больше

Dark Hole: > нагрузка раза в 2 больше
Нагрузка на что, простите? На ОЗУ?
А почему не на шурупы, которые держат материнскую плату в корпусе моего планшета?
Мда, веб-девелоперы все-таки ипанутый народ))

> Представь себе, если будут бомбардировать Ajaxсом все время
«Все время» — это как, например, в случае с чатом, когда надо каждую секунду проверять новые сообщения?
Для таких случаев существует TCP.
В упрощенческом высокоуровневом HTTP если клиент не отсылает TCP-пакет с запросом, то и пакета с ответом не получает.
А на уровне TCP все проще. Открываем вкладочку, подключение с серваком установлено. Появилось новое сообщение, сервак шлет пакет, клиент его получает, что-то делает. Также и наоборот, клиент может пакеты серваку слать.
Технически TCP реализуется на NodeJS (сервер) и socket.io (клиент)
По этому же принципу мессенджеры работают

Изменение документа

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

 .alert 
Всем привет! Вы прочитали важное сообщение.
 

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

let div = document.createElement('div');

document.createTextNode(text)

Создаёт новый текстовый узел с заданным текстом:

let textNode = document.createTextNode('А вот и я');

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

let div = document.createElement('div'); div.className = "alert"; div.innerHTML = "Всем привет! Вы прочитали важное сообщение.";

Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

 .alert  

Вот методы для различных вариантов вставки:

• node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
• node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
• node.before(. nodes or strings) –- вставляет узлы или строки до node ,
• node.after(. nodes or strings) –- вставляет узлы или строки после node ,
• node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Привет
', document.createElement('hr')); 

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

<p>Привет</p> 

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .
Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.
А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?
insertAdjacentHTML/Text/Element
С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .
Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

  
"beforebegin" – вставить html непосредственно перед elem ,
  
"afterbegin" – вставить html в начало elem ,
  
"beforeend" – вставить html в конец elem ,
  
"afterend" – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
Привет
'); div.insertAdjacentHTML('afterend', '
Пока
'); 
Привет
 
Так мы можем добавлять произвольный HTML на страницу.
Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.
У метода есть два брата:

  
elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
  
elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.
Так что, вот альтернативный вариант показа сообщения:
 .alert  
Удаление узлов
Для удаления узла есть методы node.remove() .
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
 .alert  
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение?
Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).
Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

Пример копирования сообщения:
 .alert 
Всем привет! Вы прочитали важное сообщение.
  
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
 return fragment; > ul.append(getListContent()); // (*) 
Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
 return result; > ul.append(. getListContent()); // append + оператор ". " = друзья! 
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.
Устаревшие методы вставки/удаления
Старая школа

Эта информация помогает понять старые скрипты, но не нужна для новой разработки.
Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
Добавляет node в конец дочерних элементов parentElem .
parentElem.insertBefore(node, nextSibling)
Вставляет node перед nextSibling в parentElem .
Чтобы вставить newLi в начало, мы можем сделать вот так:
list.insertBefore(newLi, list.firstChild);
parentElem.replaceChild(node, oldChild)
Заменяет oldChild на node среди дочерних элементов parentElem .
Удаляет node из parentElem (предполагается, что он родитель node ).
Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.
Несколько слов о «document.write»
Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .
Где-то на странице.
  
Конец
Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.
Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.
В современных скриптах он редко встречается из-за следующего важного ограничения:
Вызов document.write работает только во время загрузки страницы.
Если вызвать его позже, то существующее содержимое документа затрётся.
Через одну секунду содержимое этой страницы будет заменено.
  
Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.
Это его недостаток.
Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.
Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.
Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.
Итого

Методы для создания узлов:

document.createElement(tag) – создаёт элемент с заданным тегом,
document.createTextNode(value) – создаёт текстовый узел (редко используется),
elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.


node.append(. nodes or strings) – вставляет в node в конец,
node.prepend(. nodes or strings) – вставляет в node в начало,
node.before(. nodes or strings) – вставляет прямо перед node ,
node.after(. nodes or strings) – вставляет сразу после node ,
node.replaceWith(. nodes or strings) – заменяет node .
node.remove() – удаляет node .


parent.appendChild(node)
parent.insertBefore(node, nextSibling)
parent.removeChild(node)
parent.replaceChild(newElem, node)

Все эти методы возвращают node .

"beforebegin" – вставляет html прямо перед elem ,
"afterbegin" – вставляет html в elem в начало,
"beforeend" – вставляет html в elem в конец,
"afterend" – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

document.write(html)

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Читать:
Xiaomi air 2 se как подключить