Question

我有一个表示<a>元素的字符串，名为lal_output。它具有href，id和class。我想将此字符串转换为HTML：

lal_html = document.createElement('div');
lal_html.innerHTML = lal_output;

问题在于它接收到<div>包装器。我该如何摆脱呢？我必须使用没有库的JavaScript。

Answer 1

尽管您可以使用正则表达式捕获子元素，但是对于您的用例来说，document fragment可能会更容易。

lal_html = document.createDocumentFragment();
lal_html.innerHTML = lal_output;

// Attach it to the node it belongs to in the DOM
element.appendChild(lal_html);

Answer 2

您可以如下所示使用DOMParser()

var parser = new DOMParser();
var domString = '<a class="test" href="https://google.com">Google</a>';
var html = parser.parseFromString(domString, 'text/html');    
document.body.append(html.body.firstChild); //append to somewhere appropriate

一个简单的POC

Answer 3

我不能简单地使用document.createDocumentFragment()而不是document.createElement('div')。它在页面上没有产生任何输出。但是，我发现此解决方案可以解决问题。我想知道Tico提供的这种或更短的方法是否更好。

function stringToHTML(htmlStr) {    

    frag = document.createDocumentFragment();
    temp = document.createElement('div');
    temp.innerHTML = htmlStr;

    while(temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }

    return  frag;
}

lal_html = stringToHTML(lal_output);

Answer 4

您可以尝试使用insertAdjacentElement

document.body.insertAdjacentElement('beforeend', lal_output);

或者如果需要将其放置在特定元素之后：

document.querySelector('someSpecificSelector').insertAdjacentElement('afterend', lal_output);

第一个参数的其他有效值为'beforebegin'和'afterbegin'。参见MDN reference

字符串转换为HTML，没有多余的div

4 个答案: