Best way to modify an element that is not yet created
<p>I have an <code>&lt;input&gt;</code> field in my web page, and I want to add a particular method on it, let say <code>fooBar()</code>.</p>

<p>Here is what I do:</p>

<pre><code>&lt;input id="xxx" .../&gt;
&lt;script type="text/javascript"&gt;
    $("xxx").fooBar = function() { ... };
&lt;/script&gt;
</code></pre>

<p>This works well. However, for some reasons I will not detail here (in fact the HTML is generated by JSF components), the <code>&lt;script&gt;</code> will be declared <strong>before</strong> the <code>&lt;input&gt;</code> tag.</p>

<p>So in others words, I will have that in my HTML:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $("xxx").fooBar = function() { ... };
&lt;/script&gt;
&lt;input id="xxx" .../&gt;
</code></pre>

<p>So of course this code will not work correctly, as the script will try to get (<code>$("xxx")</code>) and modify an element that does not exist yet.</p>

<p>If I want to stick on the exact order of these two tags, what is the best way to accomplish what I want?</p>

<p><strong>Edit</strong></p>

<p>In my case, <code>$</code> refers to prototype, but I am also using <code>jQuery</code> in my application. And I must be compatible with IE6 :o(</p>
