I have a script in an HTML page of the following:
<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". Whats the way to do it?
It's not possible; the browser does not treat HTML content inside of <script> tags as part of the DOM. When you retrieve the content of the <script> tag with $('#idhere').html(), you're getting a string result.
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. However, if that is the case, the OP should use a different MIME type than text/html. You should use an unknown MIME type such as text/templates--using text/html confuses what the purpose of the content is.
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. Those smaller templates should rather be placed into their own <script></script> tags rather than contained in one large <script></script> tag pair.
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>
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. 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 ;). For the example you gave, you can get a reference to the DIV by doing:
<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. In this case, there is just one DIV - so you are just selecting that.
Your HTML is invalid. HTML Validator.
If you want to have HTML you can get just like that, use something like this:
<!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.
knockoutJsorHandlebarsfor example that is how you have to define the templates.