Question

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

<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添加到createElement('div')，因为它是字符串，而不是实际的HTML元素。

我可以createElement("script")和div，并从模板中为每个模板插入innerHTML，但是然后我的模板将必须仅具有div和脚本的innerHTML，而没有它们的{{1} }和script标签，这使模板代码不清楚其含义。看起来就像是“松散的代码”，我必须要有两个单独的模板才能做到这一点。

我要插入该页面的页面看起来像这样（之前是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，但更喜欢香草js。

Answer 1

您可以创建一个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

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

1 个答案: