Question

我试图获取下面的html添加到小部件。小部件不工作，当我输出下面的变量时。 html不完全一样。您可以看到HIT标签已移至顶部？

<template id="hit-template">

            <table class="table">
                <thead>
                    <tr>
                        <th>
                            name
                        </th>
                        <th>
                            brand
                        </th>
                        <th>
                            price
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @{{#hits}}
                    <tr>
                        <td>
                          @{{fname}}
                        </td>
                        <td>
                            @{{email}}
                        </td>
                        <td>
                            @{{age}}
                        </td>
                    </tr>
                    @{{/hits}}
                </tbody>
            </table>
        </template>

<script>
 var hitTemplate = document.querySelector('#hit-template').innerHTML;
</script>

hitTemplate的输出：

 {{#hits}}

                    {{/hits}}
                <table class="table">
                <thead>
                    <tr>
                        <th>
                            name
                        </th>
                        <th>
                            brand
                        </th>
                        <th>
                            price
                        </th>
                    </tr>
                </thead>
                <tbody><tr>
                        <td>
                          {{fname}}
                        </td>
                        <td>
                            {{email}}
                        </td>
                        <td>
                            {{age}}
                        </td>
                    </tr></tbody>
            </table>

非常感谢任何建议。

由于

乔

Answer 1

您应该改为这样做：

<script>
 var hitTemplate = document.querySelector('#hit-template').content.innerHTML;
</script>

该代码位于content属性中。

Answer 2

请注意该”。解析器在加载页面时确实处理元素的内容，但仅这样做以确保这些内容有效< / strong> ...“ ，因此问题在于内容已处理且无效。

尝试使用类型为script的{{1}}元素，如下所示：

text/template

从模板标记获取html

2 个答案: