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

我想在一个单独的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？

也许你可以添加loaclstoragediv元素它。然后你可以调用那个 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>

目前尚不清楚如何获取外部 HTML。所以，我想到了以下几点：

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

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

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

相关内容

最新更新

热门标签：