Insertion
Download as PPT, PDF0 likes249 views
The Insertion module provides a cross-browser solution for dynamically inserting HTML snippets or text into a page in four ways: After, Before, Bottom, and Top. After inserts the HTML as the next sibling of the given element. Before inserts as the previous sibling. Bottom inserts as the last child. Top inserts as the first child. Examples are given demonstrating each insertion method.
Insertion
- 2. Insertion 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
- 3. Insertion-After new Insertion.After(element, html) Inserts the html into the page as the next sibling of element 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>
- 4. Insertion-Before new Insertion.Before(element, html) Inserts the html into the page as the previous sibling of element 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>
- 5. Insertion-Bottom new Insertion.Bottom(element, html) Inserts the html into the page as the last child of element. 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>
- 6. Insertion-Top new Insertion.Top(element, html) Inserts the html into the page as the first child of element Example; Original HTML <div id="modern_major_general"> <p>In short, in all things vegetable, animal, and mineral...</p> </div> JavaScript new Insertion.Top( 'modern_major_general' , "<p>I am the very model of a modern major general.</p>" ); Resulting HTML <div id="modern_major_general"> <p>I am the very model of a modern major general.</p> <p>In short, in all things vegetable, animal, and mineral...</p> </div>