http://www.blogjava.net/supercrsky/articles/216978

Prototype1.6 实战05 (Element)

< HTML >
  < HEAD >
   < TITLE >  Element  </ TITLE >
< script  src ="prototype.js"  type ="text/javascript"   /></ script >
< style >
    .luck
     { } {
        color  :   red ;
     }
</ style >
   < script >
         function  _insert()
         {    
             // 检查d1元素内是否有值
             if ( ! $('d1').empty())
             {
                alert($('d1').outerText);
            }
             // 第一人参数<position,即要在哪添加>,第二个参数即要添加的内容
            Element.insert( " d1 " , " <input type='text' /> " );
             // 直接指定元素的insert也可以,直接在参数里传内容
            $('d1').insert( " <img src='' /> " );
        }

         function  _remove()
         {
            $('d1').remove();
             // 或用Element.remove('d1');
        }

         function  _replace()
         {
            $('d1').replace( " <div id='d1'>QQ</div> " );
        }

         function  _addClass()
         {
            $('t1').addClassName('luck');
        }

         function  _removeClass()
         {
            $('t1').removeClassName('luck');
        }

         function  _hide()
         {
            $('t1').hide();
        }

         function  _show()
         {
            $('t1').show();
        }

   </ script >
  </ HEAD >

  < BODY >
     < div  id ="d1" >
            dtest
     </ div >
     < input  type ="button"  value ="添加"  onclick ="_insert();" />
     < input  type ="button"  value ="替换"  onclick ="_replace();" />
     < input  type ="button"  value ="删除"  onclick ="_remove();" />
     < input  type ="text"  value ="请注意查看文字颜色"  id ="t1" />
     < input  type ="button"  value ="添加class"  onclick ="_addClass()"   />
     < input  type ="button"  value ="移除class"  onclick ="_removeClass()"   />
     < input  type ="button"  value ="隐藏"  onclick ="_hide()"   />
     < input  type ="button"  value ="显示"  onclick ="_show()"   />
     < div  id ="framer" >     < img  src ="http://www.baidu.com/img/baidu.gif"  alt ="点此还原为原来大小"  onclick ="$('framer').undoClipping();" />   </ div >  
  </ BODY >
  < script >
    ( function ()
         {
             // 剪切层的大小 
            $('framer').makeClipping().setStyle( {width: '100px' ,height: '100px'} );
        } )();

    
  </ script >
</ HTML >