How to use inline JavaScript in HTML?

Support that I have this hidden field:

<input type='hidden' id='handler' name='handler' value='5534882394' />

And imagine that I fetch an HTML fragment from server via jQuery AJAX.

<div id='result'>
    <span></span>
</div>

However, instead of writing something like this:

$(function(){
   $('#result span').text($('#handler').val());
});

I'd like to use something like:

<div id='result'>
    <span>javascript:$('#handler').val();</span>
</d开发者_如何学运维iv>

However, I don't get the intended result. Can I use this approach with JavaScript?

Update: Everybody please, I know about $(document).ready();. So, don't provide better ways. I just wanted to know if it's possible to have inline JavaScript, or not, and if yeah, how?

No, you can't use that approach with Javascript. There is no such thing as inline Javascript.

What you see in a link like <a href="javascript:alert(1)"> is the javascript: pseudo-protocol, similar in use to the http: protocol. When you point the browser to such an URL, the browser runs the script.

If you want to run a script in the page, you need a script tag.

Although the <script> tag works and would let you do what you are trying to do, I would really suggest rethinking your design there. This is not directly what you would call "unobtrusive Javascript".

Why do you preferto mix HTML and JS? If it's for curiosity - OK, but if this is intended to turn into production code then you might want to separate the two as much as you can. You will be rewarded with a much better maintainability in the end.

You could do -

<input type="text" id="handler" value="yes"/>
<div id='result'>
    <span>
       <script>document.write($('#handler').val());</script>
    </span>
</div>

and the page would run the Javascript when it hit the script tag. You'd have to make sure that '#handler' element was already loaded though or the script would fail.

In general it would be better to keep script tags such as this away from your mark-up.

Working demo - http://jsfiddle.net/ipr101/h6zXs/

Have you forgotten about the <script> tag?

<div id="result"></div>
<script>$('#result').text($('#handler').val();</script>

A few years back, I had that exact problem: I was using AJAX to retrieve HTML and that HTML had embedded Javascript. I was never able to find a better solution than parsing the HTML manually to dig out the Javascript tags and calling eval on their contents. Hackish and unreliable, but it was the best I could find.