Как отобразить форматированный HTML текст в динамическом списке c в HTML и Javascript - PullRequest
Новая
       109

Как отобразить форматированный HTML текст в динамическом списке c в HTML и Javascript

0 голосов
/ 07 августа 2020

Я хочу показать текст в формате HTML в моем динамическом списке c в HTML. Однако вместо форматированного текста отображаются теги HTML. Вот фрагмент кода 

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ul>

<p>Click the button to create a LI element.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.createElement("LI");
  var t = document.createTextNode(" I like <i>Coffee</i>");
  x.appendChild(t);
  document.getElementById("myList").appendChild(x);
}
</script>

</body>
</html>

Нажмите кнопку «Попробовать», вы увидите, что вместо форматирования HTML я получаю теги для курсива перед кофе

Что не так в коде?

1 Ответ

2 голосов
/ 07 августа 2020

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

  var x = document.createElement("LI");
  x.innerHTML = " I like <i>Coffee</i>";

Рабочий пример: 

function myFunction() {
  var x = document.createElement("LI");
  x.innerHTML = " I like <i>Coffee</i>";
  document.getElementById("myList").appendChild(x);
}
<ul id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ul>

<p>Click the button to create a LI element.</p>
<button onclick="myFunction()">Try it</button>

Ссылка: Документы Mozilla для Element.inner HTML

...