Разница между innerText и innerHTML

Опубликовано: 12 Декабря, 2021

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

Синтаксис:
Предположим, у нас есть переменная JavaScript с именем x.

 var x = document.getElementById ('тест');

Вот как мы можем использовать innerText и innerHTML для этой переменной.

innerText
```
 x.innerText
```
innerHTML
```
 x.innerHTML
```

Пример:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        Difference between
      InnerHTML and InnerText
    </ title >
 </ head >
 
< body style = "text-align:center;" >
   
  < h1 style = "color:green" >GeeksforGeeks</ h1 >
 
    < div id = "test" >
        The following element contains some
        < codes >code</ codes > and
        < italic >some text</ italic >.
    </ div >
    < p ></ p >
    < button onClick = "innerTextFn()" >
        innerHTML
    </ button >
    < button onClick = "innerHTMLFn()" >
        innerText
    </ button >
    < p id = "op" ></ p >
 
    < script >
        function innerTextFn() {
            var x = document.getElementById('test');
            alert(x.innerText);
        }
 
        function innerHTMLFn() {
            var x = document.getElementById('test');
            alert(x.innerHTML);
        }
    </ script >
 </ body >
 
</ html > 

Выход
Перед нажатием:

После щелчка по innerHTML:

После щелчка по innerText:

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

JavaScript Picked

Разница между innerText и innerHTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ