Как вставить HTML-код на страницу (с DOCTYPE)? - PullRequest
Новая
       20

Как вставить HTML-код на страницу (с DOCTYPE)?

0 голосов
/ 25 декабря 2018

Вставка кода с DOCTYPE невозможна.Для подсветки я использую highlight.js

Я пробовал: 

document.querySelectorAll("code").forEach(function(element) {
        element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    });

HTML: 

<pre><code class="html"><!DOCTYPE html>
<html>
  <body>
    <div class="wrapper"></div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Вы можете обернуть его текстовой областью, затем скопировать текст из текстовой области и установить его как innerHTML вашего элемента кода. 

document.querySelectorAll("code textarea").forEach(function(element) {
  element.parentElement.innerHTML = element.innerHTML;

});
<pre>
<code class="html">
<textarea>
<!DOCTYPE html>
<html>
  <body>
    <div class="wrapper">
      <p>Works</p>
    </div>
  </body>
</html>
</textarea>
0 голосов
/ 25 декабря 2018

Проблема в том, что вы пишете недопустимый HTML, преобразуете его в DOM (загружая HTML-документ), который выполняет восстановление после ошибок, а затем пытаетесь преобразовать DOM обратно в HTML.

собираюсь дать вам HTML-представление того, что браузер восстановил после ваших ошибок, а не исходный код.

Во-первых, вы должны правильно написать HTML-код, а не пытаться исправить это с помощью JavaScript позже. 

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div class="wrapper"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
...