Question

我在以下HTML页面中有一个脚本：

<script id="scriptid" type="text/html">
    <div id="insidedivid">
        ... html code ...
    </div>
</script>

我可以使用HTMLScriptElement获取$("#scriptid")，但我无法获取ID为"insidedivid"的基础div对象。这样做的方法是什么？

Answer 1

这是不可能的;浏览器不会将<script>标记内的HTML内容视为DOM的一部分。当您使用<script>检索$('#idhere').html()标记的内容时，您将获得字符串结果。

要回答Troy的问题，他最有可能在其文档的<head>中包含模板，以便最终能够在浏览器端动态呈现内容。但是，如果是这种情况，OP应使用与text/html不同的MIME类型。您应该使用未知的MIME类型，例如text/templates - 使用text/html会混淆内容的用途。

我猜测您尝试访问<script>代码并抓住div的原因是因为您已在其中构建了较小的子模板单个<script>标记。那些较小的模板应该放在他们自己的<script></script>标签中，而不是包含在一个大的<script></script>标签对中。

所以，而不是：

<script type="text/template" id="big_template">
    <div id="sub_template_1">
        <span>hello world 1!</span>
    </div>
    <div id="sub_template_2">
        <span>hello world 2!</span>
    </div>
</script>

这样做：

<script type="text/template" id="template_1">
    <span>hello world 1!</span>
</script>

<script type="text/template" id="template_2">
    <span>hello world 2!</span>
</script>

Answer 2

我认为在脚本标记内部使用div是完全有效的（或者在最不实用的），如果div对您为其定义的TYPE有意义脚本。例如，John Resig使用类型为“text /”的脚本标记 html“在他的微观模板解决方案中： http://ejohn.org/blog/javascript-micro-templating/ 在这种情况下，虽然（并回复原作者），你添加 SCRIPT标签的ID，并参考（我不明白为什么不会使用那种facebook类型而不是html - 但你会可能想在几个不同的浏览器中测试它;）。为了您给出的示例，您可以通过执行以下操作获得对DIV的引用：

<script id="scriptid" type="text/html">
    <div id="insidedivid">
        ... html code ...
    </div>
</script>
    $(function(){
        alert($( $( '#scriptid' ).html() ).text() ); //alerts " ... html code ..."
    });

“技巧”是获取脚本标记的HTML并将其转换为DOM 使用jQuery的元素 - 但请记住，因为你传递了所有的东西将HTML放入jQUery函数，然后立即选择ALL 顶级元素。在这种情况下，只有一个DIV - 所以你只是选择那个。

Answer 3

您的HTML无效。 HTML Validator

如果你想拥有HTML，你就可以这样做，使用类似的东西：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    var msg1 = $('message1');
    // Execute code here
});
    </script>
</head>
<body>
    <div id="content">Content</div>
    <div id="hidden" style="display: none">
        <div id="message1">Message 1</div>
        <div id="message2">Message 2</div>
    </div>
</body>
</html>

如果您正在制作模板系统，则可能需要使用AJAX。

在javascript <script>标记</script>中查找jquery对象

3 个答案: