我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
当前回答
这是我的代码,它有效:
function parseTableHtml(s) { // s is string
var div = document.createElement('table');
div.innerHTML = s;
var tr = div.getElementsByTagName('tr');
// ...
}
其他回答
我正在使用这个方法(在IE9+中有效),虽然它不会解析<td>或其他一些无效的直接子体:
function stringToEl(string) {
var parser = new DOMParser(),
content = 'text/html',
DOM = parser.parseFromString(string, content);
// return element
return DOM.body.childNodes[0];
}
stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>
对于某些html片段,如<td>test</td>、div.innerHTML、DOMParser.parseFromString和range.createContextualFragment(没有正确的上下文),此处其他答案中提到的解决方案不会创建<td>元素。
jQuery.parseHTML()正确处理它们(我将jQuery2的parseHTML函数提取为一个独立函数,可以在非jQuery代码库中使用)。
如果您只支持Edge 13+,那么只使用HTML5模板标记会更简单:
function parseHTML(html) {
var t = document.createElement('template');
t.innerHTML = html;
return t.content;
}
var documentFragment = parseHTML('<td>Test</td>');
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());
使用jnerator
这也会奏效:
$('<li>').text('hello').appendTo('#mylist');
它感觉更像是一种带有链式函数调用的jquery方式。
参观https://www.codegrepper.com/code-examples/javascript/convert+a+字符串+to+html+元素+in+js
const stringToHtml = function (str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
}