A case of Prototype1.5 's strange error

Demo Code:

<div id="test-parent">
<div class="test-child"> child </div>
</div><script>
//获取 child div
var c = document.getElementsByClassName(’test-child’)[0];
//克隆一份 child div
new Insertion.After(c, $(’test-parent’).innerHTML);
//获取克隆后插入的第二个 div
var c2 = $$(’.test-child’)[1];
c2.hide(); //Error: Object doesn’t support this property or method
</script>

Starting with Prototype1.5, the result objects obtained by the $ (), $$ () and Getelementsbyclassname () Three methods are encapsulated by the Element.extend (Elm) function before returning to the prototype. The result object automatically owns many instance methods of the element object, such as

Element.hide (Element);

Such a call can be simplified to

$ (Element). Hide ();

So what's the reason for the first part of the code to complain? Print out "$ (' test-parent '). InnerHTML" Output can be seen in some clues, IE7 output is as follows:

<div class=test-child _extended= "true" >child </DIV>

The secret is on this _extended attribute, look at the source code of Element.extend ()

Element.extend = function (Element) {
  if (!element) return;
  if (_nativeextensions) return element;  if (!element._extended && element.tagname && Element!= window) {
    var methods = element.methods, cache = Element.extend.cache;
    For (property in methods) {
      var value = Methods[property];
      if (typeof value = = ' function ')
        Element[property] = Cache.findorstore (value);
    }
  }  element._extended = true;
  return element;
}

The original Element.extend (Elm) method adds a _extended attribute to the element, and stops execution when the element is again obtained and returned by a function such as $ () if it is found to have this property.

So, the reason for the opening code error is that the _extended was copied into the innerHTML by copying an element, so that the new element inserted after the copy could not inherit to the element's instance method. When these instance methods are called on the new element, an error is thrown.

Solutions

Filtering out _extended properties from innerHTML

Re-invoke $ () after manually clearing the _extended property of the new object.

Replace innerHTML with Dom method