9

Создание нового DOM-элемента из HTML-строки с использованием встроенных методов DOM или Prototype

13

У меня есть строка HTML, представляющая элемент: <code>'&lt;li&gt;text&lt;/li&gt;'</code>. Я хотел бы добавить её к элементу в DOM (в моем случае это ul). Как я могу сделать это с помощью Prototype или методов DOM?

(Я знаю, что мог бы сделать это легко с помощью jQuery, но, к сожалению, мы не используем jQuery.)

5 ответ(ов)

0

Вам не нужно никаких настроек, у вас есть родной API:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

Этот код использует встроенный в браузер DOMParser для преобразования HTML-строки в узлы DOM. Он парсит строку и возвращает первый дочерний узел элемента <body>.

0

Вы можете создать корректные 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, и добавляет его в тело документа.

0

Вы можете использовать следующий метод, который работает в 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>, метод может не сработать должным образом из-за их некорректного размещения в иерархии документа.

0

Вы можете использовать следующий код для добавления метода 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>");

Этот код работает следующим образом:

  1. Метод createElementFromString принимает строку str, содержащую HTML-код.
  2. С помощью DOMParser строка парсится в HTML-документ.
  3. Метод затем извлекает первый дочерний элемент внутри <body> созданного документа и возвращает его.

Учтите, что этот метод может вернуть null, если строка не содержит валидного HTML или если не удаётся найти элемент.

0

Перевод на русский язык в стиле ответа на вопрос на 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() зависит от ваших конкретных требований и контекста.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь