jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

Asked 7/9, 2009 at 11:26 Answered 1/4, 2013 at 22:46

Solved jquery html firefox dom innerhtml

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.

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).

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?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script type="text/javascript">
            <!--
            function BodyLoad(){                
                document.getElementById("textbox").value = "initial UPDATE";
                DisplayTextBoxValue();
            }

            function DisplayTextBoxValue(){
                alert(document.getElementById("container").innerHTML);             
                return false;
            }
            //-->
        </script>
    </head>
    <body onload="BodyLoad();">
        <div id="container">
            <input type="text" id="textbox" value="initial" />
        </div>
        <input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" />
    </body>
</html>

Grassy answered 7/9, 2009 at 11:26 Comment(0)

Firefox doesn't update the value attribute of a DOM object based on user input, just its value property - pretty quick work around exists.

DOM:

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  // set the attribute on the DOM Element by hand - will update the innerHTML
  element.setAttribute('value', element.value);
  alert(document.getElementById("container").innerHTML);             
  return false;
}

jQuery plugin that makes .formhtml() automatically do this:

(function($) {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $("textarea", this).each(function() {
      // updated - thanks Raja & Dr. Fred!
      $(this).text(this.value);
    });
    $("input:radio,input:checkbox", this).each(function() {
      // im not really even sure you need to do this for "checked"
      // but what the heck, better safe than sorry
      if (this.checked) this.setAttribute('checked', 'checked');
      else this.removeAttribute('checked');
    });
    $("option", this).each(function() {
      // also not sure, but, better safe...
      if (this.selected) this.setAttribute('selected', 'selected');
      else this.removeAttribute('selected');
    });
    return oldHTML.apply(this);
  };

  //optional to override real .html() if you want
  // $.fn.html = $.fn.formhtml;
})(jQuery);

Abducent answered 7/9, 2009 at 11:39 Comment(3)

your plugin works fine for all controls but it does not work for Textarea alone in FF :-(....Did you change anything to make it work? Have already added 1 since this helped me a lot :-) – Nut 28/2, 2011 at 16:58

This works great, but I needed to use @Dr Fred's adjustment below. Setting the textarea's innerHTML to it's value loses line feeds and any other extra whitespace. – Joyajoyan 19/11, 2012 at 20:41

Updated with @Dr Fred's change, makes sense. – Abducent 20/11, 2012 at 18:40

This is a known "issue" in Firefox. The specifications for innerHTML are not entirely clear, so different browser vendors implement it in a different way.

A discussion about this topic can be found here:

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

Breda answered 7/9, 2009 at 11:36 Comment(0)

Thanks for your formhtml plugin. In order to use it with textarea, I had to update it :

$("textarea", this).each(function() { 
  $(this).text($(this).val()); 
});

Pooler answered 27/11, 2010 at 18:58 Comment(2)

I used @gnarf's answer with this adjustment to retain all whitespace in textarea (or close enough... $this.text(this.value)) – Joyajoyan 19/11, 2012 at 20:42

Thanks, Wish you would have suggested an edit here! I changed my answer to incorporate this. – Abducent 20/11, 2012 at 18:41

I know your question relates to innerHTML, but if it were just the value of textbox inside container that you needed, then

$('#textbox').val()

will give the correct (updated) textbox value.

Statolatry answered 7/9, 2009 at 12:10 Comment(0)

Also another DOM Approach is to set the defaultValue on the specific element - borrowing the same code from the voted answer.

function DisplayTextBoxValue(){
  var element = document.getElementById('textbox');
  element.defaultValue = element.value;    
  alert(document.getElementById("container").innerHTML);             
  return false;
}

That should print the updated innerHTML.

jQuery's solution is better as it attaches to all the input elements instead of a specific element. This can be done using "DOM only" too, will involve iterating the DOM to detect all the input elements and adding the onChange method calls on all the input elements. In case you don't know the fields that'd be on hte page.

Philibeg answered 7/4, 2011 at 10:1 Comment(0)

This update function was working only on input fields not changed by hand. Added the indicated line to update the visible input text:

  // set text input value from the associated sel dropdown and reset dropdown
  function set_input_value(eid, sel) {
      var el = document.getElementById(eid);
      el.setAttribute("value", sel.options[sel.selectedIndex].text);

      // added this line to solve the issue:
      el.value = el.getAttribute('value');

      sel.selectedIndex=0;
  }

Eryneryngo answered 1/4, 2013 at 22:46 Comment(0)

Recommended topics

Hot tags