Question

index.html 
<script >
function loadPage(){
    var xhttp,rtext,x;
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange=function(){
        if (xhttp.readyState == 4 && xhttp.status == 200) {
           rtext=xhttp.responseText;
            x = rtext.getElementById('bottom');
        }
        document.getElementById("firstdiv").innerHTML=x;
    };
    xhttp.open("GET","first.html",true);
    xhttp.send();
}

 </script>
    <body>
    <div onClick="loadPage();">Home</div>
    <div id="firstdiv"></div>
    </body>  

first.html

    <body>
    <div id="bottom">
    <p>content 1</p> 
    </div>
    <div id="bottom1">
    content 2
    </div>
    </body>

我只需要使用仅javascript并面临错误，从first.html加载“bottom”div到我的索引页面。

getElementById（'bottom'）不是define属性。

如何进行？

Answer 1

使用＆＃39; first.html＆＃39;的内容尝试creating a new document，然后在该文档中查询所需的元素。

var doc = document.implementation.createHTMLDocument("Doc Title");
doc.body.outerHTML = rtext;
var bottom = doc.getElementById('bottom');

未经测试，但这可能是一个开始的地方。

Answer 2

JavaScript仅对当前页面的元素进行操作。代码执行时

rtext=xhttp.responseText;
x = rtext.getElementById('bottom');

期待找到＆＃39;底部＆＃39;在index.html上。当响应加载到x时，x包含first.html的文本，但它不被识别为html，并且不能被解释为。

我同意e-e的回答 - 它是一个起点。

使用Javascript从其他页面加载特定内容

2 个答案: