Question

我想要一个单独的HTML文档中的预制元素列表，可以添加到我的HTML页面中。我知道我可以创建元素，然后像这样添加它们：

document.body.appendChild(document.createElement("div"));

但是我要附加的子元素是另一个HTML文档中的HTML元素。像这样：

<html>
    <!-- External doc -->
    <div id="ext">
    </div>
</html>

我想像这样将div添加到主文档中：

<html> <--Main document-->
    <head></head>
    <body></body>       

<script>
    document.body.appendChild("externalDocument".getElementById("ext")); 
</script>
</html>

如何引用外部文档并获取div？

Answer 1

也许您可以添加loaclstorage div元素，然后可以调用该lcoalstorage并使用它

   <html>
  <body>
   <!-- External doc -->
   <div id="ext">
   </div>
  <script>
   var div_element = document.getElementById("ext");
    localStorage.element = Json.Stringfy(div_element);
  </script>
  </body>
  </html>

然后json.parse并像这样使用

        <html> <--Main document-->
     <head></head>
      <body></body>       

      <script>
      var element = Json.Parse(localStorage.element);
      document.body.appendChild(element);
      </script>

Answer 2

目前尚不清楚如何获取此外部HTML。因此，我考虑了以下问题：

var htmlString = '<html><div id="div1">content</div></html>';
var html = (new window.DOMParser()).parseFromString(htmlString, "text/html");
html.getElementById("div1").innerHTML; // content

Answer 3

如果您要使用预先创建的HTML组件，请使用模板引擎。主要有流行的模板引擎可以访问：https://www.creativebloq.com/web-design/templating-engines-9134396

它们还提供许多其他功能，例如制作动态模板，支持循环，变量，json，条件等等……

如何使用Javascript从外部HTML文档中按ID获取元素？

3 个答案: