Что делает innerHTML в javascript?

Может ли кто-нибудь сказать мне, что innerHTML делает в javascript, и дать мне пример, как я могу его использовать?

Ответ 1

Свойство innerHTML используется для получения или установки содержимого HTML элемента node.

     // get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";

     // retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;

alert( content );

Ответ 2

Свойство innerHTML является частью Document Object Model (DOM), которая позволяет Javascript-коду манипулировать отображаемым веб-сайтом. В частности, он позволяет читать и заменять все в пределах данного элемента DOM (HTML-тег).

Тем не менее, манипуляции с DOM с использованием innerHTML более медленные и более подверженные сбоям, чем манипуляции на основе отдельных объектов DOM.

Ответ 3

Каждый элемент HTML имеет свойство innerHTML, которое определяет как код HTML, так и текст, который встречается между тегом открытия и закрытия этого элемента. Изменив элемент innerHTML после некоторого взаимодействия с пользователем, вы можете сделать гораздо больше интерактивных страниц.

Однако использование innerHTML требует некоторой подготовки, если вы хотите использовать его легко и надежно. Во-первых, вы должны указать элемент, который вы хотите изменить. С помощью этого идентификатора вы сможете использовать функцию getElementById, которая работает во всех браузерах.

Ответ 4

Вы можете собирать или устанавливать содержимое выбранного тега.

Как псевдо-идея, она похожа на наличие множества ящиков внутри комнаты и подразумевает идею "все внутри этой коробки"

Ответ 5

innerHTML извлекает содержимое в зависимости от id/name и заменяет их.

<!DOCTYPE html>
<html>
<head>
	<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3> 

</body>
</html>

Ответ 6

innerHTML является свойством каждого элемента. Он сообщает вам, что находится между начальным и конечным тегами элемента, а также позволяет устанавливать содержимое элемента.

свойство описывает аспект объекта. Это то, что объект имеет в отличие от объекта, который он делает.

<p id="myParagraph">
This is my paragraph.
</p>

Вы можете выбрать абзац, а затем изменить его значение innerHTML с помощью следующей команды:

document.getElementById("myParagraph").innerHTML = "This is my paragraph";

Ответ 7

объяснение innerHTML с примером:

InnerHTML манипулирует содержимым HTML элемента (получить или установить). В приведенном ниже примере, если вы щелкнете ссылку " Изменить содержимое", ее значение будет обновлено с помощью свойства innerHTML привязочной ссылки " Изменить содержимое".

Пример:

<a id="example" onclick='testFunction()'>Change Content</a>

<script>
  function testFunction(){
    // change the content using innerHTML
    document.getElementById("example").innerHTML = "This is dummy content";

    // get the content using innerHTML
    alert(document.getElementById("example").innerHTML)

  }
</script>

Ответ 8

Он представляет текстовое содержимое данного тега HTML. Может также содержать собственные теги.

Ответ 9

Каждый элемент HTML имеет свойство innerHTML, которое определяет как код HTML, так и текст, который возникает между тегом открытия и закрытия этого элемента. Изменяя элемент innerHTML после некоторого взаимодействия с пользователем, вы можете сделать гораздо больше интерактивных страниц.

Однако использование innerHTML требует некоторой подготовки, если вы хотите использовать его легко и надежно. Во-первых, вы должны указать элемент, который вы хотите изменить. С помощью этого идентификатора вы сможете использовать функцию getElementById, которая работает во всех браузерах.

После того, как вы создали эту настройку, теперь вы можете манипулировать текстом элемента. Чтобы начать, попробуйте изменить текст внутри жирного тега. JavaScript Код:

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

Этот ответ от здесь

Ответ 10

<!DOCTYPE html>
<html>
<p id="d1">This is Akash</p>
<input type="button" value="Click" onclick="fun()">
<body>
<script>
function fun()
{
document.getElementById('d1').innerHTML+="Best institute";
}
</script>
</body>
</html>

Пример внутреннего HTML в JavaScript

Ответ 11

Для понимания свойства innerHTML сначала необходимо пройти через основы объекта javascript и HTML DOM (объектная модель документа). Я постараюсь объяснить:

Объекты JavaScript состоят из свойств и методов.
для рендеринга HTML-документов веб-браузер создает DOM, в DOM каждый HTML-элемент обрабатывается как объект JavaScript, с которым связан набор свойств и методов.

Теперь перейдем к вашему вопросу:

HTML код:

<p id= "myPara"> We love to Code.</p>

Код JavaScript:

alert(document.getElementById("myPara").innerHTML);

здесь document.getElementById("myPara") вернет наш html-элемент в виде объекта javascript, который имеет предопределенное свойство innerHTML. Свойство innerHTML содержит содержимое тега HTML.

Надеюсь, это поможет.

Вы можете запустить следующий HTML-код в вашем браузере, чтобы понять это:

<html>
<body>
  <p id= "myPara"> We love to Code.</p>
  <script>
    alert(document.getElementById("myPara").innerHTML);
  </script>
</body>
</html>