Question

有没有办法将一个HTML文件的内容（包括标签和所有文件的完整文件）添加到div中？一种使用纯JavaScript的方法？或者是单独附加大量元素并使其成为函数的唯一方法吗？

Answer 1

你可以用ajax做到这一点......但是有一个问题。您加载的HTML不应包含<html>或<head>标记等...

主页：

<html>
<head>
<title>Ajax Wizardry</title>
<script>
  function ajax(requestedForm,target) {
    var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(target).innerHTML=xmlhttp.responseText;
      console.log("Content Updated");
    }
    console.log("ajax status: "+xmlhttp.status);
  }

xmlhttp.open("GET",requestedForm,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("action=fetch");
}
</script>
</head>
<body>

      <input type='button' value='Ajax Magic' onclick='ajax(`stufftoloadintodiv.html`,`target_1`)' />

<div id='target_1'></div>

</body>
</html>

stufftoloadintodiv.html内容

<p style='color:red;'>Hello World</p>

我在这里所做的是创建一个名为＆＃39; ajax＆＃39;接受2个变量。第一个是要加载的文件的路径，第二个是预期的目标元素id。因此，如果您有<div id='biscuits'></div>，并且您想要加载＆＃39; digestive.html＆＃39;的内容。然后你只需要拨打ajax('digestive.html','biscuits')

Answer 2

<强> a.html：

<html> 
  <body>
  <h1>Put here your HTML content before insertion of b.js.</h1>
      ...

  <script src="customscript.js"></script>

      ...

  <p>And here whatever content you want afterwards.</p>
  </body>
</html>

<强> customscript.js：

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Answer 3

没有javascript的一个简单解决方案是从iframe引用文件。使用此方法，您无需担心文件的HTML结构。

如何在不使用jQuery的情况下将HTML附加到现有文件中？

3 个答案: