Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery html() in Firefox (uses .innerHTML) ignores DOM changes
    text
    copied!<p>I'm really suprised I haven't run into this problem before, but it seems that calling jQueries .html() function on an element ignores changes in the DOM, i.e it returns the HTML in the original source. IE doesn't do this. jQueries .html() just uses the innerHTML property internally. </p> <p>Is this meant to happen? I'm on Firefox 3.5.2. I have a sample below, where no matter what you change the textbox value to, the innerHTML of the "container" element only ever returns the value defined in the HTML markup. The sample isn't using jQuery just to make it simpler (the result is the same using jQuery).</p> <p>Does anyone have a work around where I can get the html of a container in its current state, i.e. including any scripted changes to the DOM?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;script type="text/javascript"&gt; &lt;!-- function BodyLoad(){ document.getElementById("textbox").value = "initial UPDATE"; DisplayTextBoxValue(); } function DisplayTextBoxValue(){ alert(document.getElementById("container").innerHTML); return false; } //--&gt; &lt;/script&gt; &lt;/head&gt; &lt;body onload="BodyLoad();"&gt; &lt;div id="container"&gt; &lt;input type="text" id="textbox" value="initial" /&gt; &lt;/div&gt; &lt;input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload