Jquery review (e) of the append (), appendTo (), prepend (), prependTo (), after (), before () is easy to forget the point

Add the element method

append()、appendTo()、prepend()、prependTo()、after()、before()

By append (), appendTo (), prepend (), prependTo () method adds several new elements

In the example above, we are only at the beginning of the selected element / end insert text / HTML.

However, append () and The prepend () method capable of receiving an unlimited number of new elements parameter. May generate text / HTML (as in the example above) by jQuery, or by a JavaScript code and DOM elements.

In the following example, we create a number of new elements. These elements can be created using text / HTML, jQuery or JavaScript / DOM. We then append () method to these new elements added to the text (for prepend () equally effective): 

function appendText()
 {
 var txt1="<p>Text.</p>";               // Create element with HTML  
 var txt2=$("<p></p>").text("Text.");   // Create with jQuery
 var txt3=document.createElement("p");  // Create with DOM
 txt3.innerHTML="Text.";
 $("p").append(txt1,txt2,txt3);         // Append the new elements 
 }

By adding a number of new elements after () and before () method

after () and before () method capable of receiving an unlimited number of new elements parameter. You can create new elements via text / HTML, jQuery or JavaScript / DOM.

In the following example, we create a number of new elements. These elements can be created using text / HTML, jQuery or JavaScript / DOM. We then after () method to these new elements into the text (of before () equally effective):

 

function afterText()
 {
 var txt1="<b>I </b>";                    // Create element with HTML  
 var txt2=$("<i></i>").text("love ");     // Create with jQuery
 var txt3=document.createElement("big");  // Create with DOM
 txt3.innerHTML="jQuery!";
 $("img").after(txt1,txt2,txt3);          // Insert new elements after img
 }