我有一个表示元素的HTML字符串:'.我想将它附加到DOM中的一个元素(ul在我的例子中).如何使用Prototype或DOM方法执行此操作？
(我知道我可以在jQuery中轻松完成这个,但不幸的是我们没有使用jQuery.)
注意:大多数当前浏览器都支持HTML 元素,这提供了一种更可靠的方法来转换从字符串创建元素.有关详细信息,请参阅Mark Amery的答案.
对于较旧的浏览器和node/jsdom :( 在编写时尚不支持元素),请使用以下方法.图书馆用来从HTML字符串中获取DOM元素也是一样的(IE的一些额外工作可以解决bug的实现innerHTML):
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes
return div.firstChild;
}
请注意,与HTML模板这不会对某些元素不能合法的儿童工作 如果您已经在使用库,我建议您坚持使用库批准的方法从HTML字符串创建元素:
Prototype在其 jQuery在它 HTML 5引入了 A 例子: 请注意,使用不同容器元素的 但是, 如果您足够幸运能够编写仅针对现代浏览器用户的代码,请立即使用它们.否则,您可能需要等待一段时间才能让用户赶上. 使用insertAdjacentHTML().它适用于所有当前的浏览器,即使使用IE11.
较新的DOM实现 它得到了广泛的支持.但是,请确保在相同的MDN链接中检查其兼容性,因为它将会更改.截至2017年5月,这是: 无需任何调整,您有一个原生API: 这是一个简单的方法: 对于某些html片段,例如 jQuery.parseHTML()处理它们(我将jQuery 2的parseHTML函数提取到一个独立的要点). 对于Edge 13+,请使用模板标记: 使用Prototype,您还可以: HTML: JS: 您可以使用以下命令从字符串创建有效的DOM节点: 以下示例在页面中添加一个按钮元素,从字符串中获取标记:
我正在使用此方法（在IE9 +中有效），尽管它不会解析,如秒.
update()方法中内置了此功能.jQuery(html)和jQuery.parseHTML方法中实现了它.
函数名称`createElementFromHTML`是误导性的,因为`div.firstChild`返回一个`Node`,它不是`HTMLElement`,例如不能`node.setAttribute`.要创建一个`Element`,请从函数返回`div.firstElementChild`.
2> Mark Amery..：可用于此目的的元素(现在在WhatWG规范和MDN文档中描述).是一个HTML元素,允许任何其他元素类型作为子元素.该template有一个.content,你可以用JavaScript,它指向一个访问属性DocumentFragment与模板的内容.这意味着,你可以通过设置一个HTML字符串转换为DOM元素innerHTMLa的元素,然后伸到template的.content财产./**
* @param {String} HTML representing a single element
* @return {Element}
*/
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
var td = htmlToElement('
foo '),
div = htmlToElement('nested stuff');
/**
* @param {String} HTML representing any number of sibling elements
* @return {NodeList}
*/
function htmlToElements(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.childNodes;
}
var rows = htmlToElements('foo bar div类似方法(例如a)不太起作用.HTML限制了允许哪些元素类型存在于哪些元素类型中; 例如,你不能把a td作为直接的孩子div.如果您尝试设置innerHTMLa div来包含它们,这会导致这些元素消失.由于s对其内容没有这样的限制,因此在使用模板时这个缺点不适用.template某些旧版浏览器不支持.截至2018年1月,我可以使用...估计全球90%的用户正在使用支持templates 的浏览器.特别是,没有版本的Internet Explorer支持它们; template在Edge发布之前,Microsoft没有实现支持.
好的,现代的方法.在Opera上测试过,让我们忘记IE吧
这是一种有效的方法，非常干净；但是，（至少在Chrome 50中），这会中断脚本标签的处理。换句话说，使用此方法创建脚本标签，然后将其附加到文档（正文或头部）不会导致对标签进行评估，因此会阻止脚本执行。（这可能是设计使然，如果在附件上进行评估；我不能肯定地说。）
有一个问题。如果您在其中有一个标签，在标签的开始或结尾处带有空格（！），则它们将被删除！不要误会我的意思，这不是关于html.trim删除的空格，而是关于innerHTML设置的内部解析。就我而言，它删除了textNode中重要的空间。:-(
3> Christian d'..：var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '
4> kojiro..：range.createContextualFragment,它以与框架无关的方式执行您想要的操作.Feature Chrome Edge Firefox(Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) 11 15.0 9.1.2
请注意,这与设置div的`innerHTML`有类似的缺点; 某些元素,如`td`s,将被忽略,不会出现在结果片段中.
5> math2001..：const toNodes = html =>
new DOMParser().parseFromString(html, 'text/html').body.childNodes
这会遇到与接受的答案相同的主要缺点 - 它会像` text `那样破坏HTML.这是因为`DOMParser`试图解析一个完整的*HTML文档*,而不是所有元素都作为文档的根元素有效.
-1，因为它是[以前的答案]（/sf/ask/17360801/）的重复，后者明确指出了我在上面的评论中提到的缺点。
6> william malo..：String.prototype.toDOM=function(){
var d=document
,i
,a=d.createElement("div")
,b=d.createDocumentFragment();
a.innerHTML=this;
while(i=a.firstChild)b.appendChild(i);
return b;
};
var foo="
foobar".toDOM();
document.body.appendChild(foo);
@MarkAmery这里的区别在于他使用片段允许在DOM中附加多个根元素,这是一个额外的好处.如果只有威廉提到这是他的答案......
7> Munawwar..：test 元素.
function parseHTML(html) {
var t = document.createElement('template');
t.innerHTML = html;
return t.content.cloneNode(true);
}
var documentFragment = parseHTML('
Test ');
8> Pablo Borowi..：
$('mylist').insert('
9> GibboK..：document.createRange().createContextualFragment()let html = '';
let fragmentFromString = function (strHTML) {
return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);
10> usrbowe..：或其他一些无效的身体直接子代：
function stringToEl(string) {
var parser = new DOMParser(),
content = 'text/html',
DOM = parser.parseFromString(string, content);
// return element
return DOM.body.childNodes[0];
}
stringToEl('
推荐阅读
如何解决《不可能在Firefox中使用Twitter时间线？》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《为什么angular.forEach上下文？》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《Symfony安装缺少的供应商库》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《在python中使用递归来反转列表》经验，为你挑选了2个好方法。 ...
[详细]
如何解决《禁用在PM2中重新启动》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《ESAPI-使用禁止的依赖项获取NoClassDefFoundError(LoggerFactory)》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《JAXB不会为枚举生成枚举》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《在AndroidHTML5播放器中开始播放所需的用户手势》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《ImportError:动态模块没有定义模块导出函数(PyInit__caffe)》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《Bash提示脚本》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《水平RecyclerView与开始填充》经验，为你挑选了2个好方法。 ...
[详细]
如何解决《UIStackview具有不同对齐的子视图》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《如何使用Laravel将身份验证从一个用户切换到另一个用户》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《微服务:分解基于图形数据库的应用程序》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《FacebookInstantArticles错误"HTML元素不包含任何文本:避免包含空HTML元素"》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《在卫兵中使用功能时的二郎"非法守卫表达"》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《添加剂,半添加剂和非添加剂措施之间的区别是什么》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《使用Composer安装高级Wordpress主题》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《关于C++中的复制控制》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《HTTP状态403-未找到预期的CSRF令牌.你的会话已经过期了吗？》经验，为你挑选了0个好方法。 ...
[详细]
吐了个 "CAO" !
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站 
京公网安备 11010802040832号 | 京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有
