Главная » Языки программирования

Javascript как вставить innerhtml

Содержание
  1. Element.innerHTML
  2. Синтаксис
  3. Значение
  4. Исключения
  5. Примечания
  6. Соображения безопасности
  7. Пример
  8. JavaScript
  9. HTML
  10. CSS
  11. Результат
  12. Спецификации
  13. Смотрите также
  14. Found a content problem with this page?
  15. .inner H T M L
  16. Пример
  17. Как понять
  18. Как пишется
  19. Свойства узлов: тип, тег и содержимое
  20. Классы DOM-узлов

Element.innerHTML

Свойство интерфейса Element innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

Примечание: Если узлы , , или (en-US) имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>) , innerHTML вернёт эти символы как &amp, &lt и &gt соответственно. Используйте Node.textContent для получения правильной копии содержимого этих текстовых узлов.

Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте insertAdjacentHTML() .

Синтаксис

const content = element.innerHTML; element.innerHTML = htmlString;

Значение

Строка DOMString , которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

Исключения

Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.

Возникает при попытке вставить HTML в узел, у которого родителем является Document .

Примечания

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой. 
// Скопируйте и вставьте в адресную строку в виде одной строки. javascript:"
"+document.documentElement.innerHTML.replace(//g,"<") + "
 
"; 
 
Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введён текст в поле ввода , IE меняет значение атрибута свойства innerHTML, но браузеры Gecko не делают этого.
 
Соображения безопасности
 
Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.
 
const name = "John"; // предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае // . name = ""; el.innerHTML = name; // безвредный в этом случае 
 
Хотя это может выглядеть как XSS-атака, результат безопасный. HTML5 указывает на тег вставленный через InnerHTM должен не выполнится.
 
const name = ""; el.innerHTML = name; // показывает alert 
 
По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent . Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст.
 
Пример
 
Этот пример использует innerHTML для создания механизма логирования сообщений внутри элемента на странице.
 
JavaScript
 
function log(msg)  var logElem = document.querySelector(".log"); var time = new Date(); var timeStr = time.toLocaleTimeString(); logElem.innerHTML += timeStr + ": " + msg + "
"; > log("Регистрация событий мыши внутри этого контейнера. "); 
 
Функция log() создаёт сообщение получая текущее время из объекта Date , используя toLocaleTimeString() , и соединяя строку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом «log» .
 
function logEvent(event)  var msg = "Event " + event.type + " at " + event.clientX + ", " + event.clientY + ""; log(msg); > 
 
Затем мы используем этот обработчик событий на элементе, который содержит наше логирование, для каждого события мыши:
 
var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); boxElem.addEventListener("click", logEvent); boxElem.addEventListener("mouseenter", logEvent); boxElem.addEventListener("mouseleave", logEvent); 
 
HTML
 
HTML довольно простой для нашего примера.
 
div class="box"> div>strong>Log:strong>div> div class="log">div> div> 
 
CSS
 
Для нашего примера используем следующие CSS стили.
 
.box  width: 600px; height: 300px; border: 1px solid black; padding: 2px 4px; overflow-y: scroll; overflow-x: auto; > .log  margin-top: 8px; font-family: monospace; > 
 
Результат
 
В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.
 
Спецификации
 
Смотрите также
 
     
  • innerDOM — Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.
    •  
  • Element.insertAdjacentHTML — Альтернатива для innerHTML, позволяющая добавлять новый HTML.
    •  
  • jssaxparser — Более надёжным (хотя и более тяжёлым) решением, чем innerDOM (поддерживает парсинг с пространствами имён, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку значительно проще).
    •  
  • Эффективность соображений: quirksmode.
    •  
 
Found a content problem with this page?
 
This page was last modified on 14 февр. 2023 г. by MDN contributors.
 
Your blueprint for a better internet.
 
Источник
 
.inner H T M L
 
Свойство inner H T M L позволяет считать содержимое элемента в виде HTML-строки или установить новый HTML.
 
Новое значение HTML необходимо передавать в виде строки и оно заменит текущее содержимое элемента. При передаче невалидной HTML-строки будет выброшена ошибка. HTML-строкой является строка, которая содержит валидную HTML-разметку, в inner H T M L нельзя передать DOM-элемент.
 
Пример
 
Скопировать ссылку «Пример» Скопировано
 
     
Введите логин
  form> label>Логинlabel> input type="text" id="login" /> div class="error">Введите логинdiv> form>      
 
 const form = document.querySelector('form') console.log(form.innerHTML)// '
Введите логин
' // Меняем содержимое новым htmlform.innerHTML = '
Вход выполнен
' const form = document.querySelector('form') console.log(form.innerHTML) // '
Введите логин
' // Меняем содержимое новым html form.innerHTML = '
Вход выполнен
'      
 
   
Вход выполнен
  form> div class="success">Вход выполненdiv> form>      
 
Как понять
 
Скопировать ссылку «Как понять» Скопировано
 
Браузер предоставляет разработчику возможность управлять содержимым на странице и менять его как угодно. inner H T M L – самый простой способ считать или изменить HTML-содержимое элемента. Это свойство использует строки, что даёт возможность легко менять и очищать содержимое элементов.
 
Когда в inner H T M L присваивается новое значение, все предыдущее содержимое удаляется и создаётся новое, что приводит к перерисовке страницы.
 
Как пишется
 
Скопировать ссылку «Как пишется» Скопировано
 
Обращение к свойству inner H T M L вернёт содержимое элемента в виде HTML-строки. Просмотреть или изменить содержимое можно у всех элементов, включая и . Присвоение нового значения к свойству очистит всё текущее содержимое и заменит его новым HTML.
 
 document.body.innerHTML = 'Hello Inner HTML!' document.body.innerHTML = 'Hello Inner HTML!'      
 
В результате в документ будет вставлен HTML:
 
 
Hello Inner HTML!
 h1>Hello Inner HTML!h1>      
 
Стоит помнить, что строка с HTML-разметкой это не DOM-элемент. inner H T M L работает только со строками, самостоятельно разбирает её содержимое и создаёт элементы.
 
 const divEl = document.createElement('div') // document.body.innerHTML = divEl const divEl = document.createElement('div') // document.body.innerHTML = divEl     
 
Так как в div El находится объект DOM-элемента, то при присвоении в inner H T M L он приведётся к строке, в результате в элемент вставится строка » [ object H T M L Div Element ] » .
 
 [object HTMLDivElement] body>[object HTMLDivElement]body>      
 
Если передать в inner H T M L строку с невалидным HTML, то будет выброшена ошибка. Однако большинство современных браузеров помогают разработчику, умеют самостоятельно дополнять разметку (например если забыли закрыть тег) и даже дают возможность для кастомных тегов. Потому встретить ошибку при передаче в inner H T M L невалидного HTML очень сложно.
 
Несмотря на то, что с помощью inner H T M L вставить любой HTML, есть некоторые ограничения, связанные с безопасностью веб-приложений.
 
Так же не рекомендуется использовать inner H T M L , если нужно просто изменить текст в элементе. Для этой задачи есть свойство inner Text или text Content .
 
 // Скрипт станет частью body, но не выполнитсяdocument.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerrordocument.body.innerHTML = ' ' // Скрипт станет частью body, но не выполнится document.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerror document.body.innerHTML = ' '      
 
Источник
 
Свойства узлов: тип, тег и содержимое
 
Теперь давайте более внимательно взглянем на DOM-узлы.
 
В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.
 
Классы DOM-узлов
 
Каждый DOM-узел принадлежит соответствующему встроенному классу.
 
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
 
На рисунке ниже изображены основные классы:
 
Существуют следующие классы:
Оцените статью
© 2024 Программирование