All geek questions in one place

Find jquery object inside javascript <script> tag

I have a script on an HTML page with the following content:

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

I can get the HTMLScriptElement with $("#scriptid") , but I cannot get the base div object with id "insidedivid" . How to do it?

+6
source share
3 answers

It's impossible; the browser does not process the HTML content inside the <script> tags as part of the DOM. When you load the contents of the <script> with $('#idhere').html() , you get the result of the string.

To answer Troy’s question, he most likely includes templates in the <head> his document so that he can ultimately dynamically display content on the browser side. However, if so, the OP should use a different MIME type than text/html . You must use an unknown MIME type, for example text/templates - using text/html confuses the meaning of the target.

I guess the reason you are trying to get into the <script> tag and grab the div because you created small subpatterns within the same <script> tag. These smaller templates should be placed in your <script></script> rather than in the same large <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 it:

 <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>
+8
source

I think this is perfectly true in order to have a div inside the script tag (or at least useful) if the div makes sense for the TYPE that you defined for the script. For example, John Resig uses a script tag of type "text / html" in his solution for micro-templates: http://ejohn.org/blog/javascript-micro-templating/ In this case, though (and in response to the original author ) you add the script tag identifier and reference it (I don’t understand why this will not work with this type of facebook instead of html - but you would probably want to test it in several browsers;). For the example you gave, you can get a link 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 tag of the script and include elements with jQuery in the DOM - but remember, because you pass all the HTML to the jquery function, then you immediately select ALL the top-level elements. In this case, there is only one DIV - so you just select it.

+2
source

Your HTML is not valid. HTML Validator

If you want to have HTML code, you can use it 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 creating a template system, you can use AJAX instead.

0
source

Source: https://habr.com/ru/post/923083/

More articles:


All Articles