- Element: innerHTML property
- Value
- Exceptions
- Usage notes
- Reading the HTML contents of an element
- Replacing the contents of an element
- Operational details
- Appending HTML to an element
- HTML
- JavaScript
- Security considerations
- Examples
- JavaScript
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- HTML DOM Element innerHTML
- See Also:
- The Differences Between innerHTML, innerText and textContent
- Syntax
- Property Value
- Return Value
- More Examples
- Example
- Example
- Example
- The Differences Between innerHTML, innerText and textContent
- HTML Example
- JavaScript Examples
- Browser Support
- .inner H T M L
- Пример
- Как понять
- Как пишется
Element: innerHTML property
The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .
Value
A string containing the HTML serialization of the element’s descendants. Setting the value of innerHTML removes all of the element’s descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString.
Exceptions
Thrown if an attempt was made to set the value of innerHTML using a string which is not properly-formed HTML.
Thrown if an attempt was made to insert the HTML into a node whose parent is a Document .
Usage notes
The innerHTML property can be used to examine the current HTML source of the page, including any changes that have been made since the page was initially loaded.
Reading the HTML contents of an element
Reading innerHTML causes the user agent to serialize the HTML or XML fragment comprised of the element’s descendants. The resulting string is returned.
let contents = myElement.innerHTML;
This lets you look at the HTML markup of the element’s content nodes.
Note: The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.
Replacing the contents of an element
Setting the value of innerHTML lets you easily replace the existing contents of an element with new content.
Note: This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using Element.setHTML() instead, in order to sanitize the content before it is inserted.
For example, you can erase the entire contents of a document by clearing the contents of the document’s body attribute:
This example fetches the document’s current HTML markup and replaces the »
.documentElement.innerHTML = ` $document.documentElement.innerHTML.replace( //g, "<", )> `;
Operational details
What exactly happens when you set value of innerHTML ? Doing so causes the user agent to follow these steps:
- The specified value is parsed as HTML or XML (based on the document type), resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements.
- If the element whose contents are being replaced is a element, then the element’s content attribute is replaced with the new DocumentFragment created in step 1.
- For all other elements, the element’s contents are replaced with the nodes in the new DocumentFragment .
Appending HTML to an element
Setting the value of innerHTML lets you append new contents to the existing one of an element.
HTML
ul id="list"> li>a href="#">Item 1a>li> li>a href="#">Item 2a>li> li>a href="#">Item 3a>li> ul>
JavaScript
Please note that using innerHTML to append HTML elements (e.g. el.innerHTML += «link» ) will result in the removal of any previously set event listeners. That is, after you append any HTML element that way you won’t be able to listen to the previously set event listeners.
Security considerations
It is not uncommon to see innerHTML used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.
let name = "John"; // assuming 'el' is an HTML DOM element el.innerHTML = name; // harmless in this case // … name = ""; el.innerHTML = name; // harmless in this case
Although this may look like a cross-site scripting attack, the result is harmless. HTML specifies that a tag inserted with innerHTML should not execute.
const name = ""; el.innerHTML = name; // shows the alert
For that reason, it is recommended that instead of innerHTML you use:
- Element.setHTML() to sanitize the text before it is inserted into the DOM.
- Node.textContent when inserting plain text, as this inserts it as raw text rather than parsing it as HTML.
Warning: If your project is one that will undergo any form of security review, using innerHTML most likely will result in your code being rejected. For example, if you use innerHTML in a browser extension and submit the extension to addons.mozilla.org, it may be rejected in the review process. Please see Safely inserting external content into a page for alternative methods.
Examples
This example uses innerHTML to create a mechanism for logging messages into a box on a web page.
JavaScript
function log(msg) const logElem = document.querySelector(".log"); const time = new Date(); const timeStr = time.toLocaleTimeString(); logElem.innerHTML += `$timeStr>: $msg>
`; > log("Logging mouse events inside this container…");
The log() function creates the log output by getting the current time from a Date object using toLocaleTimeString() , and building a string with the timestamp and the message text. Then the message is appended to the box with the class «log» .
We add a second method that logs information about MouseEvent based events (such as mousedown , click , and mouseenter ):
function logEvent(event) const msg = `Event $event.type> at $event.clientX>, $event.clientY> `; log(msg); >
Then we use this as the event handler for a number of mouse events on the box that contains our log:
const 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
The HTML is quite simple for our example.
div class="box"> div>strong>Log:strong>div> div class="log">div> div>
CSS
The following CSS styles our example content.
.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; >
Result
The resulting content looks like this. You can see output into the log by moving the mouse in and out of the box, clicking in it, and so forth.
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- Node.textContent and HTMLElement.innerText
- Element.insertAdjacentHTML()
- Element.outerHTML
- Element.setHTML
- Parsing HTML or XML into a DOM tree: DOMParser
- Serializing a DOM tree into an XML string: XMLSerializer
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
HTML DOM Element innerHTML
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
See Also:
The Differences Between
innerHTML, innerText and textContent
Syntax
Return the innerHTML property:
Set the innerHTML property:
Property Value
Return Value
More Examples
Example
Change the HTML content of two elements:
let text = «Hello Dolly.»;
document.getElementById(«myP»).innerHTML = text;
document.getElementById(«myDIV»).innerHTML = text;
Example
Repeat the HTML content of an element:
Example
Change the HTML content and URL of a link:
The Differences Between
innerHTML, innerText and textContent
The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. |
The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except and elements. |
The textContent property returns: The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags. |
HTML Example
JavaScript Examples
let text = document.getElementById(«myP»).innerText;
let text = document.getElementById(«myP»).innerHTML;
let text = document.getElementById(«demo»).textContent;
The innerText property returns: This element has extra spacing and contains a span element. |
The innerHTML property returns: This element has extra spacing and contains a span element. |
The textContent property returns: This element has extra spacing and contains a span element. |
Browser Support
element.innerHTML is supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |
.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 = ' '