Создать новый HTML-документ, включая Doctype

Если я сделаю:

let html = `<!DOCTYPE html>
<html>
    <head>
        <title>Hello, world!</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>`;

let newHTMLDocument = document.implementation.createHTMLDocument().documentElement;

newHTMLDocument.innerHTML = html;

console.info( newHTMLDocument );

Результат:

<html>
    <head>
        <title>Hello, world!</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

Почему не включен тег doctype? Что мне нужно сделать, чтобы при выводе newHTMLDocument он включал тег doctype?

javascript html dom innerhtml outerhtml

25.03.2018 03:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

893

Ответы 2

.documentElement возвращает элемент <html> (элемент в корне документа - - <!doctype> не является элементом, это узел декларации), поэтому вы исключаете doctype самостоятельно.

Если избавиться от .documentElement, doctype останется.

let html = `<!doctype html>
  <html>
    <head>
        <title>Hello, world!</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>`;

let newHTMLDocument = document.implementation.createHTMLDocument();
newHTMLDocument.innerHTML = html;

// You can access the doctype as an object:
console.info("The <!doctype> is a node type of: " +newHTMLDocument.doctype.nodeType,
            "\nWhile the documentElement is a node type of: " + newHTMLDocument.documentElement.nodeType);
console.info(newHTMLDocument.doctype);

alert(newHTMLDocument.innerHTML);

Я пробовал ваш код, но если я сделаю console.info (newHTMLDocument); он не содержит моих элементов, тега заголовка и тега p. Мне нужны все мои элементы в объекте, потому что я собираюсь использовать некоторые функции JS DOM для объекта.

— 25.03.2018 04:13

@GTSJoe newHTMLDocumemt - это объект, вы не регистрируете его напрямую. Мой код регистрирует это .innerHTML. Вы можете получить любое его содержимое, например, с помощью newHTMLDocument.querySelector ().

— 25.03.2018 04:34

Для справки, в итоге я использовал следующий ответ: stackoverflow.com/questions/8227612/…, который использует createHTMLDocument doc.open (); doc.write (HTML); doc.close (); создать объект HTML

— 25.03.2018 04:48

25.03.2018 03:48

Вы также можете использовать createDocumentType() с createHTMLDocument() или createDocument():

const doc = document.implementation.createHTMLDocument('title');
console.info('before', new XMLSerializer().serializeToString(doc));

const docType = document.implementation.createDocumentType('qualifiedNameStr', 'publicId', 'systemId');
doc.doctype.replaceWith(docType);
console.info('after', new XMLSerializer().serializeToString(doc));

01.11.2019 23:48

Другие вопросы по теме

Удалить выбор базы данных MySQL из раскрывающегося меню в PHP

Проблемы с центрированием фигуры в bootstrap 4

Адаптивный текст на изображении

Col-Sm не влияет на страницу

Изменить текст метки ввода файла на имя файла

Как сделать простой проигрыватель воспроизведения / паузы на сайте Wix?

Отзывчивые переходы и изменение абсолютных позиций

Bootstrap 4-карточное пустое пространство после добавления адаптивного класса col, обернуть элементы внутри div или добавить классы напрямую?

Как сделать так, чтобы ширина элемента оставалась неизменной, пока текст увеличивается при наведении?

Как мне реализовать трехходовую систему в Yahtzee с помощью javascript?

Создать новый HTML-документ, включая Doctype

Ответы 2

Другие вопросы по теме

Похожие вопросы