使用javascript*无jquery在类内创建元素，该类是包含的html的一部分

我正试图通过XMLHttpRequest将一些HTML代码加载到我的index.HTML中。但是，将收到的HTML代码附加到index.HTML中的另一个标记会阻止我

这是带有XMLHttprequest的my index.html：

<header id="header"></header>

<script>
    if (document.body.contains(document.getElementById('header'))) {
        var reqHeader = new XMLHttpRequest();
        reqHeader.onload = function () {
            document.getElementById('header').appendChild(this.responseText);
        }
        reqHeader.open('get', 'header.html', true);
        reqHeader.send();
    }
</script>

if（document.body.contains（document.getElementById（'header'））{
var reqHeader=new XMLHttpRequest（）；
reqHeader.onload=函数（）{
document.getElementById（'header'）.appendChild（this.responseText）；
}
reqHeader.open（'get'，'header.html'，true）；
reqHeader.send（）；
}

这是my header.html文件的内容：

<div id="headerWrapper">
    <ul>
        <li id="foo">1</li>
    </ul>
</div>

1

XMLHttpRequest返回的内容是一个字符串。您可以使用javascript解析该字符串，它将返回一个DOM元素，您可以使用通常的javascript DOM访问语法访问该元素

因此，在XMLHttpRequest中，使用以下代码

const parser = new DOMParser().parseFromString(htmlString, 'text/html');
document.getElementById('header').appendChild(parser.querySelector('#headerWrapper'));

由于跨源策略，没有XMLHttpRequest的简化示例：

if（document.body.contains（document.getElementById（'header'））{
var htmlString='
1
2
；
const parser=new DOMParser（）.parseFromString（htmlString，'text/html'）；
document.getElementById（'header'）.appendChild（parser.querySelector（'headerWrapper'）；
}
document.getElementById（'foo'）.classList.add（'test'）

文件
只需在代码中使用
headerContent
类，而不是
headerBlock
问题是我无法针对包含文件中的任何元素。当我将包含文件的内容放入索引时，它正在工作。可能的问题是，我在XMLHttpRequest中包含了外部文件，但它不允许我使用js将其内部作为目标。我可以使用XMLHttpRequest包含该文件，也可以使用上述代码。XMLHttpRequest的响应是一个字符串。然后，您应该能够使用javascript DOMParser解析这个字符串，将内容加载到DOM对象中。之后，您可以像往常一样使用getElementById等访问DOM对象中的数据。只有一个先决条件：包含的文件必须是有效的XML，这意味着只有一个根节点。@sanjay您的解决方案实际上可以工作。一定还有另一个问题（可能是跨产地政策或类似政策）。查看我的答案，其中包含一个可运行的最小解决方案版本，在该版本中我去掉了XMLHttpRequest