我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
当前回答
从字符串渲染DOM的最快解决方案:
let render = (relEl, tpl, parse = true) => {
if (!relEl) return;
const range = document.createRange();
range.selectNode(relEl);
const child = range.createContextualFragment(tpl);
return parse ? relEl.appendChild(child) : {relEl, el};
};
在这里,您可以检查DOM操作React与原生JS的性能
现在您可以简单地使用:
let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
<p class="bold">New DOM</p>
</div>
`);
当然,在不久的将来,您将使用来自内存的引用,因为var“element”是您在文档中新创建的DOM。
记住“innerHTML=”非常慢:/
其他回答
var msg=“测试”jQuery.parseHTML(消息)
这是我的代码,它有效:
function parseTableHtml(s) { // s is string
var div = document.createElement('table');
div.innerHTML = s;
var tr = div.getElementsByTagName('tr');
// ...
}
可以使用以下方法从字符串创建有效的DOM节点:
document.createRange().createContextualFragment()
以下示例在页面中添加一个按钮元素,从字符串中获取标记:
让html='<button type=“button”>单击我</按钮>';let fragmentFromString=函数(strHTML){return document.createRange().createContextualFragment(strHTML);}let fragment=fragmentFromString(html);document.body.appendChild(片段);
HTML5引入了可用于此目的的<template>元素(如现在在WhatWG规范和MDN文档中所描述的)。
<template>元素用于声明可在脚本中使用的HTML片段。元素在DOM中表示为HTMLTemplateElement,该元素具有DocumentFragment类型的.content属性,以提供对模板内容的访问。这意味着您可以通过设置<template>元素的innerHTML,然后到达模板的.content属性,将HTML字符串转换为DOM元素。
示例:
/**
* @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('<td>foo</td>'),
div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');
/**
* @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('<tr><td>foo</td></tr><tr><td>bar</td></tr>');
注意,使用不同容器元素(如div)的类似方法不太奏效。HTML对允许哪些元素类型存在于哪些其他元素类型中有限制;例如,不能将td作为div的直接子级。如果试图将div的innerHTML设置为包含这些元素,这会导致这些元素消失。由于<template>对其内容没有这样的限制,因此在使用模板时不适用此缺点。
然而,一些旧浏览器不支持模板。截至2021 4月,我可以使用……吗。。。据估计,全球96%的用户正在使用支持模板的浏览器。特别是,没有版本的Internet Explorer支持它们;在Edge发布之前,Microsoft没有实施模板支持。
如果你有幸编写了只针对现代浏览器用户的代码,那么现在就开始使用吧。否则,您可能需要等待一段时间才能让用户跟上。
以下是如何使用PrototypeJS(正如OP 12年前最初要求的那样):
HTML格式:
<ul id="mylist"></ul>
JS:
$('mylist').insert('<li>text</li>');
注意,这不是jQuery!