我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?

(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)


当前回答

我从这篇文章中得到了链接。(是否将HTML字符串转换为DOM元素?)

对我来说,我想找到一种将字符串转换为HTML元素的方法。如果您也有此需求,可以尝试以下方法

constfrag=document.createRange().createContextualFragment(`<a href=“/link.js”>js</a><a>去</a>`) constaCollection=frag.querySelectorAll(“a”)for(let[key,a]of Object.entries(aCollection)){console.log(a.getAttribute(“href”),a.textContent)}

其他回答

这是我的代码,它有效:

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

以下是如何使用PrototypeJS(正如OP 12年前最初要求的那样):

HTML格式:

<ul id="mylist"></ul>

JS:

$('mylist').insert('<li>text</li>');

注意,这不是jQuery!

对于某些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>');
function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

这是我的工作代码

我想将“文本”字符串转换为HTML元素

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;