在javascript中查找jquery对象<script> tag

Question

I have a script in an HTML page of the following: 我在以下HTML页面中有一个脚本：

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

I am able to get the HTMLScriptElement using $("#scriptid") but I am not able to get the underlying div object with the id "insidedivid" . 我能够使用$("#scriptid")获取HTMLScriptElement但我无法获得ID为"insidedivid"的底层div对象。 Whats the way to do it? 这样做的方法是什么？

Answer 1

It's not possible; 这是不可能的; the browser does not treat HTML content inside of <script> tags as part of the DOM. 浏览器不会将<script>标记内的HTML内容视为DOM的一部分。 When you retrieve the content of the <script> tag with $('#idhere').html() , you're getting a string result. 当您使用$('#idhere').html()检索<script>标记的内容时，您将获得字符串结果。

To answer Troy's question, he's most likely including templates in the <head> of his document so he can ultimately render content dynamically on the browser-side. 为了回答Troy的问题，他最有可能在他的文档的<head>中包含模板，这样他最终可以在浏览器端动态呈现内容。 However, if that is the case, the OP should use a different MIME type than text/html . 但是，如果是这种情况，OP应使用与text/html不同的MIME类型。 You should use an unknown MIME type such as text/templates --using text/html confuses what the purpose of the content is. 您应该使用未知的MIME类型，例如text/templates使用text/html混淆内容的用途。

I'm guessing the reason you're trying to reach into the <script> tag and grab a div is because you've built smaller sub-templates within the single <script> tag. 我猜你试图进入<script>标签并获取div的原因是因为你在单个<script>标签中构建了较小的子模板。 Those smaller templates should rather be placed into their own <script></script> tags rather than contained in one large <script></script> tag pair. 那些较小的模板应该放在它们自己的<script></script>标签中，而不是包含在一个大的<script></script>标签对中。

So, instead of: 所以，而不是：

<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>

Do this: 做这个：

<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

I think it's perfectly valid to have a div inside a script tag (or at least useful), if a div makes sense to the TYPE you defined for the script. 我认为在脚本标记内部使用div是完全有效的（或者至少是有用的），如果div对您为脚本定义的TYPE有意义。 For example, John Resig uses a script tag with type "text/ html" in his micro-templating solution: http://ejohn.org/blog/javascript-micro-templating/ In this instance though (and in reply to the original author) you add an ID to the SCRIPT tag, and refer to that (I don't see why it wouldn't work with that facebook type instead of html - but you'd probably want to test it in a few different browsers ;). 例如，John Resig在他的微模板解决方案中使用了一个类型为“text / html”的脚本标记： http ： //ejohn.org/blog/javascript-micro-templating/虽然在这个例子中（并回复原文）作者）你向SCRIPT标签添加一个ID，并参考（我不明白为什么它不适用于那种facebook类型而不是html - 但你可能想在几个不同的浏览器中测试它; ）。 For the example you gave, you can get a reference to the DIV by doing: 对于您给出的示例，您可以通过执行以下操作来获取对DIV的引用：

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

The "trick" is to get the HTML of the script tag and turn in into DOM elements with jQuery - but remember, because you are passing all the HTML into the jQUery function then you are immediately selecting ALL of the top level elements. “技巧”是获取脚本标记的HTML并使用jQuery转换为DOM元素 - 但请记住，因为您将所有HTML传递到jQUery函数，然后您将立即选择所有顶级元素。 In this case, there is just one DIV - so you are just selecting that. 在这种情况下，只有一个DIV - 所以你只是选择它。

Answer 3

Your HTML is invalid. 您的HTML无效。 HTML Validator . HTML验证器。

If you want to have HTML you can get just like that, use something like this: 如果你想拥有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>

If you are making a templating system, you may want to use AJAX instead. 如果您正在制作模板系统，则可能需要使用AJAX。

在javascript中查找jquery对象<script> tag

问题描述

3 个解决方案

解决方案1
8 2012-08-16 22:56:11

解决方案2
2 2015-09-10 21:01:37

解决方案3
0 2012-08-17 00:22:37

在javascript中查找jquery对象<script> tag

问题描述

3 个解决方案

解决方案1 8 2012-08-16 22:56:11

解决方案2 2 2015-09-10 21:01:37

解决方案3 0 2012-08-17 00:22:37

解决方案1
8 2012-08-16 22:56:11

解决方案2
2 2015-09-10 21:01:37

解决方案3
0 2012-08-17 00:22:37