时间戳

首页 > 解决方案 > 如何将 DIV 和 SCRIPT 从单个 HTML 模板插入页面

javascript - 如何将 DIV 和 SCRIPT 从单个 HTML 模板插入页面

问题描述

我有一个 HTML 模板，其中包括一个 DIV（包含一个按钮）和一个脚本，该脚本将包含一个在单击该按钮时调用的函数（通过$.get()into检索的 template.html var text）：

<div id="CLC_Form">
    various text and checkbox inputs go here...
    <br>
    <input type="button" id="close_clc" value="Done" onclick="CLC_Done()" />
</div>

<script>
    function CLC_Done() {
        document.getElementById("CLC_Form").style.display = "none";
    }
</script>

但是在 中.get callback()，我不能appendChild(text)将此 HTML 内容添加到 中，BODY因为它是字符串，而不是实际的 HTML 元素。

我可以createElement('div')和createElement("script"), 并从模板中为每个模板插入 innerHTML，但是我的模板必须只有 div 和脚本的 innerHTML，没有它们的divandscript标记，这使得模板代码对于它是什么含糊不清。它看起来就像“松散的代码”，我必须有两个单独的模板才能做到这一点。

我要插入的页面如下所示（之前的 index.html）：

<body>
    <div style="padding:20px;">
        <div style="clear:both; margin-bottom:32px;">
            Some stuff
        </div>
        <div id="aPanels"></div>
        <div id="bPanels"></div>
        <div id="cPanels"></div>
    </div>
</body>

我想要实现的最终结果如下所示（index.html 之后）：

<body>
    <div style="padding:20px;">
        <div style="clear:both; margin-bottom:32px;">
            Some stuff
        </div>
        <div id="aPanels"></div>
        <div id="bPanels"></div>
        <div id="cPanels"></div>

        <div id="CLC_Form">
            various text and checkbox inputs go here...
            <br>
            <input type="button" id="close_clc" value="Done" onclick="CLC_Done()" />
        </div>

        <script>
            function CLC_Done() {
                document.getElementById("CLC_Form").style.display = "none";
            }
        </script>

    </div>
</body>

有没有办法做到这一点？还是我必须 从两个单独的模板中createElement()设置？.innerHTML

如果需要，我可以使用 jQuery，但更喜欢 vanilla js。

标签： javascriptjqueryhtml

解决方案

您可以创建一个documentFragment并设置它的innerHTML. 除非您附加它，否则它在 DOM 中不存在，并且当您附加它时，片段将完全替换为.innerHTML 

let fragment = document.createFragment();
fragment.innerHTML = text;
document.body.appendChild(fragment);

DocumentFragments是 DOM 节点。它们绝不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有子级替换。

https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

推荐阅读