如何使用Javascript從外部HTML文檔中按ID獲取元素？

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 個解決方案

解決方案1
0 2019-04-24 18:46:49

解決方案2
0 2019-04-24 18:52:27

解決方案3
-1 2019-04-24 18:53:13

如何使用Javascript從外部HTML文檔中按ID獲取元素？

問題描述

3 個解決方案

解決方案1 0 2019-04-24 18:46:49

解決方案2 0 2019-04-24 18:52:27

解決方案3 -1 2019-04-24 18:53:13

解決方案1
0 2019-04-24 18:46:49

解決方案2
0 2019-04-24 18:52:27

解決方案3
-1 2019-04-24 18:53:13