Prototype JavaScript framework - Insertion

Insertion

2007-01-15T22:29:00Z

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

Insertion provides a cross-browser solution to the dynamic insertion of HTML snippets (or plain text, obviously). Comes in four flavors: After, Before, Bottom and Top, which behave just as expected.

Note that if the inserted HTML contains any <script> tag, these will be automatically evaluated after the insertion (Insertion internally calls String#evalScripts).

After

2007-01-08T03:58:00Z

new Insertion.After(element, html)

Inserts the html into the page as the next sibling of element.

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

Note that if the inserted HTML contains any <script> tag, these will be automatically evaluated after the insertion (Insertion.After internally calls String#evalScripts).

Example

Original HTML


  <div>
    <p id="animal_vegetable_mineral">In short, in all things vegetable, animal, and mineral...</p>
  </div>

JavaScript


  new Insertion.After('animal_vegetable_mineral', "<p>I am the very model of a modern major general.</p>");

Resulting HTML


  <div>
    <p id="animal_vegetable_mineral">In short, in all things vegetable, animal, and mineral...</p>
    <p>I am the very model of a modern major general.</p>
  </div>

Before

2007-01-08T03:58:00Z

new Insertion.Before(element, html)

Inserts the html into the page as the previous sibling of element.

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

Note that if the inserted HTML contains any <script> tag, these will be automatically evaluated after the insertion (Insertion.Before internally calls String#evalScripts).

Example

Original HTML


  <div>
    <p id="modern_major_general">I am the very model of a modern major general.</p>
  </div>

JavaScript


  new Insertion.Before('modern_major_general', "<p>In short, in all things vegetable, animal, and mineral...</p>");

Resulting HTML


  <div>
    <p>In short, in all things vegetable, animal, and mineral...</p>
    <p id="modern_major_general">I am the very model of a modern major general.</p>
  </div>

Bottom

2007-01-08T03:57:00Z

new Insertion.Bottom(element, html)

Inserts the html into the page as the last child of element.

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

Note that if the inserted HTML contains any <script> tag, these will be automatically evaluated after the insertion (Insertion.Bottom internally calls String#evalScripts).

Example

Original HTML


  <div id="modern_major_general">
    <p>In short, in all things vegetable, animal, and mineral...</p>
  </div>

JavaScript


  new Insertion.Bottom('modern_major_general', "<p>I am the very model of a modern major general.</p>");

Resulting HTML


  <div id="modern_major_general">
    <p>In short, in all things vegetable, animal, and mineral...</p>
    <p>I am the very model of a modern major general.</p>
  </div>

Top

2007-01-08T03:55:00Z

new Insertion.Top(element, html)

Inserts the html into the page as the first child of element.

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

Note that if the inserted HTML contains any <script> tag, these will be automatically evaluated after the insertion (Insertion.Top internally calls String#evalScripts).

Example

Original HTML


  <div id="modern_major_general">
    <p>I am the very model of a modern major general.</p>
  </div>

JavaScript


  new Insertion.Top('modern_major_general', "<p>In short, in all things vegetable, animal, and mineral...</p>");

Resulting HTML


  <div id="modern_major_general">
    <p>In short, in all things vegetable, animal, and mineral...</p>
    <p>I am the very model of a modern major general.</p>
  </div>