如何使用javascript将html文件内容添加为另一个html中的子元素？

Question

我有两个html文件。我想使用javascript在另一个文件中添加一个文件内容作为div元素内容。 PFB我使用的代码片段。

1.没有Ajax

file = fopen(getScriptPath("report"), 0);
file_length = flength(file);
content = fread(file, file_length);
document.getElementById("secondary").innerText = content;

2.Ajax call

var reader = new FileReader();
function readText(){        
var reader = new FileReader();
reader.onload = function (e) {  
   var output=e.target.result;
   document.getElementById('secondary').innerHTML= output;
 }
reader.readAsText('report');    

Answer 1

为了简化答案，我将使用jQuery来完成所有繁重的任务。

jQuery + iFrame

var $iframe = $('<iframe>').attr('src','YOUR_OTHER_PAGE');
$('body').append($iframe);
//Note: Will need styling etc to place the iFrame where you want it

jQuery + AJAX

$('body').load('YOUR_OTHER_PAGE');

jQuery Documentation for .load

老实说，我会尽量避免两者。如果您可以将HTML内容添加到服务器端的第一页（因此在PHP中，可能使用include函数），那将是最好的。