Javascript innerHTML

Question

Я в настоящее время изучаю Javascript DOM и innerHTML и обнаружил некоторые проблемы в понимании innerHTML.

Вот мои коды: методы http://jsfiddle.net/hphchan/bfjx1w70/1/

Я узнал стандартный метод DOM и innerHTML и она отлично работает, но я не знаю, почему это неправильно закодировать следующее:

// this method fails 
var element2 = document.createElement('p'); 
element2.innerHTML = "hello <em>Herbert</em>"; 

// standard methods of innerHTML method I learnt from textbook, BUT it requires to type tags in HTML 
var element3 = document.getElementById('el'); 
element3.innerHTML = "innerHTML: hello <em>Herbert</em>"; 

Я хочу спросить, почему он не работает для первого метода. В чем проблема? Кроме того, что, если я не хочу вводить что-либо (включая теги) в HTML и хочу использовать innerText для выполнения того же результата, что и JSFiddle, показывает «привет Herbert»?

Answer 1

Основной ошибкой является innerText использования. Для большинства целей я бы держался подальше от этого, поскольку innerHTML работает для обеих ситуаций. (текст и разметка)

Хотя я полагаю, что у innerText есть свои прелести, если вы хотите отображать HTML-код, а не визуализировать его.

Итак, поскольку у вас есть HTML-тег внутри строки, это не обычный текстовый узел. Если бы вы просто использовали «hello Herbert» вместо «hello» Herbert «это сработало бы.

var element2 = document.getElementById('el'); 
 

 
element2.innerText = "hello Herbert";

<p id='el'></p>

Другая проблема заключается в том, что Вы имеете элемент, пока вы не на самом деле положить его в DOM, это бесполезно, поэтому пример 2 не работает.

Попробуйте

document.body.appendChild(element2); 

Так,

var element2 = document.createElement('p'); 
 

 
element2.innerHTML = "hello <em>Herbert</em>"; 
 

 
document.body.appendChild(element2);

Надеется, что это помогает! Посмотрите на http://www.w3schools.com/jsref/met_node_appendchild.asp для получения дополнительной информации.

Answer 2

Потому что "hello <em>Herbert</em>" содержит html-тег (em), поэтому innerText не будет работать, но innerHTML Работа.

Answer 3

Текст "hello <em>Herbert</em>" - это не совсем текст, так как он содержит содержимое HTML. Вам действительно нужно использовать innerHTML для этого случая:

element2.innerHTML = "hello <em>Herbert</em>"; 

Answer 4

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

EDIT: Теперь я только что увидел, что ваша проблема в том, что элемент даже не отображался вообще, я просто подумал, что вы задаетесь вопросом, почему Герберт не получил курсивом. В этом случае это связано с тем, что вы не добавили второй элемент в тело, как в первой версии.Третья версия не создает элемент, он использует существующий, поэтому вам не нужно добавлять его. ;)