У меня есть HTML - строка , представляющая элемент: '<li>text</li>'
. Я хотел бы добавить его к элементу в DOM ( ul
в моем случае). Как я могу сделать это с помощью Prototype или DOM?
(Я знаю, что мог бы легко это сделать в jQuery, но, к сожалению, мы не используем jQuery.)
javascript
dom
prototypejs
Омер Бохари
источник
источник
var nodes = document.fromString("<b>Hello</b> <br>");
Ответы:
Примечание: большинство современных браузеров поддерживают
<template>
элементы HTML , которые обеспечивают более надежный способ превращения создания элементов из строк. См . Ответ Марка Эмери ниже для деталей .Для более старых браузеров и для node / jsdom : (который еще не поддерживает
<template>
элементы на момент написания) используйте следующий метод. Это то же самое, что библиотеки используют для получения элементов DOM из строки HTML ( с некоторой дополнительной работой для IE, чтобы обойти ошибки с его реализациейinnerHTML
):Обратите внимание, что в отличие от шаблонов HTML это не будет работать для некоторых элементов, которые по закону не могут быть потомками a
<div>
, таких как<td>
s.Если вы уже используете библиотеку, я бы порекомендовал вам придерживаться одобренного библиотекой метода создания элементов из строк HTML:
update()
метод .jQuery(html)
иjQuery.parseHTML
методы.источник
createElementFromHTML
вводит в заблуждение, посколькуdiv.firstChild
возвращает a,Node
которое,HTMLElement
например, не можетnode.setAttribute
. Вместо этого создатьElement
возвратdiv.firstElementChild
из функции.<div>
упаковка HTML, которую я добавил,.innerHTML
меня раздражала. Я никогда не думал об использовании.firstChild
.div
и вывод[object SVGSVGElement]
пока консольный журнал дает мне правильный элемент DOM. Что я делаю неправильно?В HTML 5 появился
<template>
элемент, который можно использовать для этой цели (как сейчас описано в спецификации WhatWG и документах MDN ).<template>
Элемент используется для объявления фрагменты HTML , которые могут быть использованы в сценариях. Элемент представлен в DOM как объектHTMLTemplateElement
со.content
свойствомDocumentFragment
типа, чтобы обеспечить доступ к содержимому шаблона. Это означает , что вы можете преобразовать строку HTML для элементов DOM, установивinnerHTML
из<template>
элемента, затем достигая вtemplate
«S.content
собственности.Примеры:
Обратите внимание, что похожие подходы, в которых используется другой элемент контейнера, например
div
, не совсем работают. HTML имеет ограничения на то, какие типы элементов могут существовать внутри каких других типов элементов; Например, вы не можете поставитьtd
в качестве прямого потомкаdiv
. Это приводит к тому, что эти элементы исчезают, если вы пытаетесь установитьinnerHTML
adiv
для их содержания. Поскольку у<template>
s нет таких ограничений на их содержимое, этот недостаток не применяется при использовании шаблона.Тем
template
не менее, не поддерживается в некоторых старых браузерах. По состоянию на январь 2018 г. Можно ли использовать ... по оценкам, 90% пользователей во всем мире используют браузер, который поддерживаетtemplate
s . В частности, ни одна версия Internet Explorer не поддерживает их; Microsoft не реализовалаtemplate
поддержку до выхода Edge.Если вам повезло, что вы пишете код, предназначенный только для пользователей в современных браузерах, используйте его прямо сейчас. В противном случае вам, возможно, придется подождать некоторое время, чтобы пользователи наверстали упущенное.
источник
html.trim
а во внутреннем разборе установки innerHTML. В моем случае это удаляет важные пробелы, являющиеся частью textNode. :-(Используйте insertAdjacentHTML () . Он работает со всеми современными браузерами, даже с IE11.
источник
insertAdjacentHTML
работает со всеми браузерами начиная с IE 4.0.innerHTML += ...
является то, что при использовании этого метода ссылки на предыдущие элементы остаются неизменными.beforebegin
,afterbegin
,beforeend
,afterend
. Смотрите статью MDN.В более новых реализациях DOM есть то
range.createContextualFragment
, что вы хотите, независимо от фреймворка.Это широко поддерживается. Чтобы быть уверенным, проверьте его совместимость в той же ссылке MDN, поскольку она будет меняться. По состоянию на май 2017 года это так:
источник
innerHTML
элемента div; некоторые элементы, такие какtd
s, будут игнорироваться и не появятся в результирующем фрагменте.Нет необходимости в настройке, у вас есть собственный API:
источник
<td>text</td>
. Это потому, чтоDOMParser
пытается проанализировать полный HTML-документ , и не все элементы допустимы в качестве корневых элементов документа.Для определенных фрагментов HTML, таких как
<td>test</td>
div.innerHTML, DOMParser.parseFromString и range.createContextualFragment (без правильного контекста) решения, упомянутые в других ответах, не будут создавать<td>
элемент.jQuery.parseHTML () обрабатывает их должным образом (я извлек функцию parseHTML в jQuery 2 в независимую функцию, которая может использоваться в кодовых базах не-jquery).
Если вы поддерживаете только Edge 13+, проще использовать тег шаблона HTML5:
источник
Вот простой способ сделать это:
источник
Вы можете создать действительные DOM-узлы из строки, используя:
document.createRange().createContextualFragment()
В следующем примере добавляется элемент кнопки на странице, извлекающий разметку из строки:
источник
DocumentFragment
объект, он все еще - к моему большому удивлению - страдает от того же дефекта в общепринятом ответ: если вы делаетеdocument.createRange().createContextualFragment('<td>bla</td>')
, вы получите фрагмент , который содержит только текст «бла» без<td>
элемента. Или, по крайней мере, это то, что я наблюдаю в Chrome 63; Я не вникал в спецификации , чтобы выяснить , является ли это правильное поведение или нет.С Prototype вы также можете сделать:
HTML:
JS:
источник
Я использую этот метод (работает в IE9 +), хотя он не будет анализировать
<td>
или некоторые другие недопустимые прямые потомки тела:источник
Кроме того, для улучшения полезного фрагмента .toDOM (), который мы можем найти в разных местах, теперь мы можем безопасно использовать обратные ссылки ( литералы шаблона ).
Таким образом, мы можем иметь одинарные и двойные кавычки в объявлении foo html.
Это ведет себя как heredocs для тех, кто знаком с этим термином.
Кроме того, это может быть улучшено с помощью переменных, чтобы сделать сложные шаблоны:
Итак, почему бы не использовать напрямую
.innerHTML +=
? Таким образом, весь DOM пересчитывается браузером, это намного медленнее.https://caniuse.com/template-literals
источник
Я добавил
Document
прототип, который создает элемент из строки:источник
td
s.HTML5 & ES6
<template>
демонстрация
источник
Поздно, но просто как записка;
Можно добавить тривиальный элемент в целевой элемент в качестве контейнера и удалить его после использования.
// Проверено на Chrome 23.0, Firefox 18.0, т.е. 7-8-9 и Opera 12.11.
источник
Самое быстрое решение для визуализации DOM из строки:
И здесь вы можете проверить производительность для манипулирования DOM React против родного JS
Теперь вы можете просто использовать:
И, конечно, в ближайшем будущем вы используете ссылки из памяти, потому что var "element" - это ваш новый созданный DOM в вашем документе.
И помните, что "innerHTML =" очень медленный: /
источник
Вот мой код, и он работает:
источник
Черт возьми, я думал, что поделюсь этим со сложным, но все же простым подходом, который я придумал ... Может, кто-то найдет что-то полезное.
источник
Почему бы не сделать с родным JS?
источник
источник
Вы можете использовать следующую функцию для преобразования текста «HTML» в элемент
источник
td
s.Используйте jnerator
источник
Вот рабочий код для меня
Я хотел преобразовать текстовую строку в элемент HTML
источник
wwww
?var msg = "test" jQuery.parseHTML (msg)
источник
Это тоже будет работать:
Это больше похоже на способ jquery с цепными вызовами функций.
источник