为什么Domparser.parsefromstring正在剥离HTML标签？

Question

let html = document.querySelector('template').innerHTML
let parser = new DOMParser()
objects.forEach(object => { // objects is a array of objects retirando from a API
    let string = Object.entries(object).reduce((str, key) => {
        return str.replace(`#[${key[0]}]`, key[1]);
    }, html)
    let node = parser.parseFromString(string, 'text/html').body.firstChild
    // HTMLElement.appendChild(node)
    // HTMLElement.append(string)
    HTMLElement.innerHTML += string
})

这个没有HTML标签的文字，我无法用它插入DOM

HTMLElement.appendChild(node)

如果这样做：

不起作用。

HTMLElement.append(string)

但是是：

HTMLElement.innerHTML += string

这不是我想要的方式，因为这不是我计划的方式。 尝试这个小提琴

您使用

DOMParser.parseFromString将字符串变成HTML，但它并没有按照您的期望保留HTML标签。之所以发生这种情况，是因为您正在尝试使用.firstChild

来获取HTML元素，但是它并没有返回您想要的方式。

Answer 1

HTMLElement.innerHTML += string

时，您只是将HTML代码直接添加到元素。浏览器理解这一点，并将其作为实际的HTML呈现。因此在这种情况下正常工作。

但使用

.appendChild(node)

或

.append(string)

，您需要将实际的HTML元素（而不仅仅是字符串）添加到DOM.

使用

.firstChild

，使用

.firstElementChild

（这获取第一个HTML元素）来确保您从解析的html中获得正确的节点。

let parser = new DOMParser();

objects.forEach(object => {
    let string = Object.entries(object).reduce((str, key) => {
        return str.replace(`#[${key[0]}]`, key[1]);
    }, html);

    let doc = parser.parseFromString(string, 'text/html');
    
    let node = doc.body.firstElementChild;

    HTMLElement.appendChild(node);
});