Создание нового DOM-элемента из HTML-строки с использованием встроенных методов DOM или Prototype
У меня есть строка HTML, представляющая элемент: <code>'<li>text</li>'</code>
. Я хотел бы добавить её к элементу в DOM (в моем случае это ul
). Как я могу сделать это с помощью Prototype или методов DOM?
(Я знаю, что мог бы сделать это легко с помощью jQuery, но, к сожалению, мы не используем jQuery.)
5 ответ(ов)
Вам не нужно никаких настроек, у вас есть родной API:
const toNodes = html =>
new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
Этот код использует встроенный в браузер DOMParser
для преобразования HTML-строки в узлы DOM. Он парсит строку и возвращает первый дочерний узел элемента <body>
.
Вы можете создать корректные DOM-узлы из строки, используя метод:
document.createRange().createContextualFragment()
В следующем примере мы добавляем элемент кнопки на страницу, используя разметку из строки:
let html = '<button type="button">Нажми на меня!</button>';
let fragmentFromString = function (strHTML) {
return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);
Этот код создает объект DocumentFragment
, основанный на строке html
, и добавляет его в тело документа.
Вы можете использовать следующий метод, который работает в IE9 и выше, однако стоит отметить, что он не будет парсить <td>
или другие недопустимые прямые дочерние элементы <body>
:
function stringToEl(string) {
var parser = new DOMParser(),
content = 'text/html',
DOM = parser.parseFromString(string, content);
// возвращаем элемент
return DOM.body.childNodes[0];
}
stringToEl('<li>text</li>'); // РЕЗУЛЬТАТ: <li>text</li>
Данный код использует DOMParser
для парсинга строки в HTML-элемент. Вы можете передавать любые корректные HTML-теги, и он вернет первый дочерний элемент <body>
. Однако имейте в виду, что для некоторых тегов, таких как <td>
, метод может не сработать должным образом из-за их некорректного размещения в иерархии документа.
Вы можете использовать следующий код для добавления метода createElementFromString
в прототип Document
, который создаёт элемент из строки:
Document.prototype.createElementFromString = function (str) {
const element = new DOMParser().parseFromString(str, 'text/html');
const child = element.documentElement.querySelector('body').firstChild;
return child;
};
После добавления этого метода, вы сможете использовать его следующим образом:
document.createElementFromString("<h1>Hello World!</h1>");
Этот код работает следующим образом:
- Метод
createElementFromString
принимает строкуstr
, содержащую HTML-код. - С помощью
DOMParser
строка парсится в HTML-документ. - Метод затем извлекает первый дочерний элемент внутри
<body>
созданного документа и возвращает его.
Учтите, что этот метод может вернуть null
, если строка не содержит валидного HTML или если не удаётся найти элемент.
Перевод на русский язык в стиле ответа на вопрос на StackOverflow:
На ваш вопрос "Почему не сделать это с помощью чистого JavaScript?" можно ответить следующим образом:
Ваш код создает элемент div
и добавляет в него HTML-код с помощью createContextualFragment()
, что действительно полезно, когда нужно вставить разметку, и минимизирует необходимость парсинга HTML строки вручную. Однако, если вы просто хотите добавить HTML-код в элемент, вы можете использовать более простой метод, такой как innerHTML
. Вот альтернативный подход:
var s = "<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>";
var e = document.createElement('div');
e.innerHTML = s;
e = e.firstElementChild;
Этот код более лаконичен и прост в понимании. Если вам не требуется особая обработка (например, добавление контекста как в createContextualFragment
), то использование innerHTML
является хорошей практикой.
Тем не менее, следует помнить о потенциальных рисках использования innerHTML
, таких как возможность возникновения XSS-уязвимостей, если вставляемый контент не проходит должной проверки. Если вы работаете с данными от пользователей, важно безопасно экранировать их, прежде чем добавлять в DOM.
Таким образом, выбор между innerHTML
и createContextualFragment()
зависит от ваших конкретных требований и контекста.
Как проверить, скрыт ли элемент в jQuery?
Получить координаты (X,Y) HTML-элемента
Как изменить класс элемента с помощью JavaScript?
Удаление всех дочерних элементов узла DOM в JavaScript
Цикл for для элементов HTMLCollection