append checked

Benchmark created by gnarf on March 11, 2011

Description

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="outer"><div id="inner">
<h1>HTML Ipsum Presents</h1>
               
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
               
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a { 
        display: block; 
        width: 300px; 
        height: 80px; 
}
</code></pre>
</div>
<form action="#" method="post" id="form">
    <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>

    <div>
         <h4>Radio Button Choice</h4>

         <label for="radio-choice-1">Choice 1</label>
         <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

                 <label for="radio-choice-2">Choice 2</label>
         <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>

        <div>
                <label for="select-choice">Select Dropdown Choice:</label>
                <select name="select-choice" id="select-choice">
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                </select>
        </div>
        
        <div>
                <label for="textarea">Textarea:</label>
                <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        </div>
        
        <div>
            <label for="checkbox">Checkbox:</label>
                <input type="checkbox" name="checkbox" id="checkbox" />
    </div>

        <div>
            <input type="submit" value="Submit" />
    </div>
</form>
</div>

<script>
  var fixed = (function($) {
  
   var div = document.createElement(div),
       input;
  
   div.innerHTML = "<input type='checkbox' />";
   input = div.getElementsByTagName("input")[0];
  
   // IE6 actually sets checked to true here, and if it doesn't work, the
   // appendChild doesn't clear the checked state - it should be fairly safe
   input.click();
   // interestingly - if you set input.checked = true it will work - odd eh?
   // and maybe we should call this "appendResetsChecked"
   $.support.noAppendChecked = input.checked && !div.appendChild(input).checked;
  
   if ($.support.noAppendChecked) {
    $("#outer").append("Fix added support");
    var _append = $.fn.append;
  
    function getChecked(el) {
     if (el && el.jquery) {
      return el.length == 1 && el[0].nodeName == "INPUT" && el[0].checked ? el : el.find('input:checked');
     }
     return $();
    }
  
    $.fn.append = function(arg) {
     var chk = getChecked(arg),
         ret = _append.apply(this, arguments);
     getChecked(arg).removeAttr('checked');
     chk.attr('checked', 'checked');
     return ret;
    };
   }
   return $;
  })(jQuery.sub());
  
  var $outer = $("#outer"),
      $inner = $("#inner"),
      $form = $("#form"),
      fixedOuter = fixed("#outer"),
      fixedInner = fixed("#inner"),
      fixedForm = fixed("#form");
</script>

Test runner

$outer.append($inner);

fixedOuter.append(fixedInner);

$outer.append($form);

fixedOuter.append(fixedForm);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by gnarf on March 11, 2011
• Revision 2: published on March 11, 2011
• Revision 3: published on March 11, 2011