如何用 Javascript 替换整个 HTML 内容? [英] How to replace entire HTML content with Javascript?
问题描述
我尝试使用 $("html").html(this.responseText);.它替换了内容，但不替换 head 和 body 标签.
例如，如果我想替换此内容:
<头><title>页面标题</title><脚本>...</脚本><脚本>...</脚本><身体><h1>这是一个标题</h1><脚本>...</脚本></html>然后我在检查器中检查我的 HTML 结构，结果如下:
<title>页面标题</title><脚本>...</脚本><脚本>...</脚本><h1>这是一个标题</h1><脚本>...</脚本></html>它弄乱了我的 css.我试过没有脚本，它工作得很好.这个问题的解决方案是什么?
我也尝试过使用 javascript 方法
document.open();document.write(this.responseText);文档.close();但它混淆了我的 javascripts.我收到重新声明语法错误.
我想要实现的真实代码:
正如我所指出的那样
document.querySelector('html').innerText = 'yolo';但是如果你需要渲染 HTML，你应该这样做
document.querySelector('html').innerHTML = 'yolo';
I tried to use $("html").html(this.responseText);. Which replaces the content but it does not replace the head and body tags.
So for example if i want replace this content:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>...</script>
<script>...</script>
</head>
<body>
<h1>This is a Heading</h1>
<script>...</script>
</body>
</html>
Then i check my HTML structure in inspector, and the result this:
<!DOCTYPE html>
<html>
<title>Page Title</title>
<script>...</script>
<script>...</script>
<h1>This is a Heading</h1>
<script>...</script>
</html>
And it messed my css so. I have tried without scripts, and it worked fine. What is the solution for this problem?
I have also tried with javascript approach
document.open();
document.write(this.responseText);
document.close();
But it confuses my javascripts. I am getting redeclaration syntax error.
My real code where i want to implement:
<script>
var frm = $('#frm');
var submitActors = frm.find('input[type=submit]');
var submitActor = null;
submitActors.click(function(event) {
submitActor = this;
});
frm.unbind('submit').submit(function () {
var formAction = document.getElementById("frm").getAttribute('action'); // Get the form action.
var data = "";
var pageUrl = "";
var test_uuid = "";
var test_number = "";
var qid = JSON.parse(sessionStorage.getItem('userChoice')).qid;
if(submitActor.name == "cmdSave"){
data = {
"cmdSave" : $("#cmdSave").val(),
"Answer": document.querySelector('input[name="Answer"]:checked').value,
"csrfmiddlewaretoken": document.querySelector('input[name=csrfmiddlewaretoken').value,
"qid": qid
}
}
else if(submitActor.name == "cmdNext"){
data = {
"cmdNext": document.querySelector('#cmdNext').value,
"csrfmiddlewaretoken":document.querySelector('input[name=csrfmiddlewaretoken').value,
"qid": qid
}
}
var httpRequest = new XMLHttpRequest();
var formData = new FormData();
Object.keys(data).forEach(function(key) {
console.log(key, data[key]);
formData.append(key, data[key]);
});
console.log(formData)
httpRequest.onreadystatechange = function(){
if ( this.readyState == 4 && this.status == 200 ) {
var response = this.responseText;
console.log(this.responseText) // Display the result inside result element.
// 1.Option
{% comment %} document.open();
document.write(this.responseText);
document.close(); {% endcomment %}
// 2.Option
{% comment %} document.documentElement.innerHTML = this.responseText; {% endcomment %}
// 3.Option
$(document).ready(function(){
$("html").html(response);
});
test_number = document.getElementById("lblNrCrt").textContent;
test_uuid = "{{test.uuid}}";
pageUrl = "/intro/" + test_uuid + "/" + test_number + "/";
window.history.pushState('', '', pageUrl);
}
};
httpRequest.open("post", formAction);
httpRequest.send(formData);
return false;
});
</script>
As I pointed out it can be done
document.querySelector('html').innerText = 'yolo';
But if you need to render HTML you should do
document.querySelector('html').innerHTML = '<div>yolo</div>';
这篇关于如何用 Javascript 替换整个 HTML 内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
