Module Insertion
Insertion  <ul><li>Insertion  provides a cross-browser solution to the dynamic insertion of HTML snippets (or plain text, ...
Insertion-After <ul><li>new Insertion.After(element, html) </li></ul><ul><li>Inserts the html into the page as the next si...
Insertion-Before <ul><li>new Insertion.Before(element, html)  </li></ul><ul><li>Inserts the html into the page as the prev...
Insertion-Bottom <ul><li>new Insertion.Bottom(element, html) </li></ul><ul><li>Inserts the html into the page as the last ...
Insertion-Top <ul><li>new Insertion.Top(element, html) </li></ul><ul><li>Inserts the html into the page as the first child...
Upcoming SlideShare
Loading in …5
×

Insertion

436 views

Published on

Prototype Javascript

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Insertion

  1. 1. Module Insertion
  2. 2. Insertion <ul><li>Insertion provides a cross-browser solution to the dynamic insertion of HTML snippets (or plain text, obviously): </li></ul><ul><li>Comes in four flavors: After, Before, Bottom and Top , which behave just as expected </li></ul>
  3. 3. Insertion-After <ul><li>new Insertion.After(element, html) </li></ul><ul><li>Inserts the html into the page as the next sibling of element </li></ul><ul><li>Example; </li></ul><ul><li>Original HTML </li></ul><ul><li><div><p id=&quot;animal_vegetable_mineral&quot;>In short, in all things vegetable, animal, and mineral...</p></div> </li></ul><ul><li>  Javascript </li></ul><ul><li>new  Insertion.After( 'animal_vegetable_mineral' ,  &quot;<p>I am the very model of a modern major general.</p>&quot; ); </li></ul><ul><li>// Resulting HTML </li></ul><ul><li><div> </li></ul><ul><li>   <p id=&quot;animal_vegetable_mineral&quot;>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li>  <p>I am the very model of a modern major general.</p> </li></ul><ul><li></div> </li></ul>
  4. 4. Insertion-Before <ul><li>new Insertion.Before(element, html)  </li></ul><ul><li>Inserts the html into the page as the previous sibling of element </li></ul><ul><li>Example; </li></ul><ul><li>Original HTML </li></ul><ul><li><div> </li></ul><ul><li><p id=&quot;modern_major_general&quot;>I am the very model of a modern major general. </p> </li></ul><ul><li></div> </li></ul><ul><li>Javascript </li></ul><ul><li>new  Insertion.Before( 'modern_major_general' ,  &quot;<p>In short, in all things vegetable, animal, and mineral...</p>&quot; ); </li></ul><ul><li>Resulting HTML </li></ul><ul><li><div><p>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li><p id=&quot;modern_major_general&quot;>I am the very model of a modern major general.</p></div> </li></ul>
  5. 5. Insertion-Bottom <ul><li>new Insertion.Bottom(element, html) </li></ul><ul><li>Inserts the html into the page as the last child of element. </li></ul><ul><li>Example ; </li></ul><ul><li>Original HTML </li></ul><ul><li><div id=&quot;modern_major_general&quot;> </li></ul><ul><li><p>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li></div> </li></ul><ul><li>JavaScript </li></ul><ul><li>new  Insertion.Bottom( 'modern_major_general' ,  &quot;<p>I am the very model of a modern major  general.</p>&quot; ); </li></ul><ul><li>Resulting HTML </li></ul><ul><li><div id=&quot;modern_major_general&quot;> </li></ul><ul><li>     <p>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li>  <p>I am the very model of a modern major general.</p> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul>
  6. 6. Insertion-Top <ul><li>new Insertion.Top(element, html) </li></ul><ul><li>Inserts the html into the page as the first child of element </li></ul><ul><li>Example; </li></ul><ul><li>Original HTML </li></ul><ul><li><div id=&quot;modern_major_general&quot;> </li></ul><ul><li>  <p>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li></div> </li></ul><ul><li>JavaScript </li></ul><ul><li>new  Insertion.Top( 'modern_major_general' ,  &quot;<p>I am the very model of a modern major general.</p>&quot; ); </li></ul><ul><li>Resulting HTML </li></ul><ul><li><div id=&quot;modern_major_general&quot;> </li></ul><ul><li><p>I am the very model of a modern major general.</p> </li></ul><ul><li>  <p>In short, in all things vegetable, animal, and mineral...</p> </li></ul><ul><li></div> </li></ul>

×