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

Question

I have an HTML template that includes a DIV (containing a button) and a script that will contain a function to call when that button is clicked (template.html retrieved via $.get() into var text ): 我有一个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>

But in the .get callback() , I cannot appendChild(text) this HTML content to the BODY because it is a string, not an actual HTML element. 但是，在.get callback() ，我无法将此HTML内容appendChild(text)到BODY因为它是字符串，而不是实际的HTML元素。

I could createElement('div') and createElement("script") , and insert the innerHTML for each from templates, but then my template would have to have just the innerHTML of the div and the script, without their div and script tags, which makes the template code vague as to what it is. 我可以使用createElement('div')和createElement("script") ，并从模板中为每个模板插入innerHTML，但是我的模板必须仅具有div和脚本的innerHTML，而没有它们的div和script标签，这使模板代码不清楚其含义。 It would just look like "loose code", and I would have to have two separate templates to do it. 它看起来就像是“松散的代码”，我必须有两个单独的模板才能执行此操作。

The page I am wanting to insert it into looks like this (index.html before): 我想要将其插入的页面如下所示（之前为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>

And the end result I am wanting to achieve looks like this (index.html after): 我想要达到的最终结果如下所示（之后是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>

Is there a way to do this? 有没有办法做到这一点？ Or will I have to createElement() and set the .innerHTML from two separate templates? 还是我必须创建 createElement()并从两个单独的模板设置.innerHTML ？

I have jQuery available if I need it, but would prefer vanilla js. 我有可用的jQuery，但更喜欢香草js。

Answer 1

You can create a documentFragment and set its innerHTML . 您可以创建一个documentFragment并设置其innerHTML 。 It doesn't exist in the DOM unless you append it, and when you do, the fragment is replaced by its innerHTML entirely . 除非您添加它，否则它在DOM中不存在，并且当您添加它时，该片段将完全由其innerHTML 替换。

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

DocumentFragments are DOM Nodes. DocumentFragments是DOM节点。 They are never part of the main DOM tree. 它们永远不是主DOM树的一部分。 The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. 通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。 In the DOM tree, the document fragment is replaced by all its children. 在DOM树中，文档片段被其所有子元素替换。

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-07 20:49:04

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-07 20:49:04

解决方案1
0 已采纳 2018-10-07 20:49:04