jquery Get set values, add elements in a detailed

JQuery Get content and propertiesjQuery DOM Operations

A very important part of JQuery is the ability to manipulate the DOM.

JQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.

Tip: DOM = Document Object model

Get Content-text (), HTML (), and Val ()

Three simple and practical jQuery methods for DOM manipulation:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to get the content using the JQuery text () and HTML () methods:

Instance

$ ("#btn1"). Click (function() {  alert ("text:" + $ ("#test"). Text ()); $ ("#btn2"). Click (function() {  alert ("HTML:" + $ ("#test"). html ());});

The following example shows how to get the value of an input field using the JQuery Val () method:

Instance

$ ("#btn1"). Click (function() {  alert ("Value:" + $ ("#test"). Val ()) ;

Get Property-attr ()

The JQuery attr () method is used to get the property value.

The following example shows how to get the value of the href attribute in the link:

Instance

$ ("button"). Click (function() {  alert ("#w3s"). attr ("href");});

JQuery Set content and properties

Set Content-text (), HTML (), and Val ()

We will use the three same methods in the previous chapter to set the content:

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

The following example shows how to set the content by using the text (), HTML (), and Val () methods:

Instance

$ ("#btn1"). Click (function() {  $ ("#test1"). Text ("Hello world!" );}); $ ("#btn2"). Click (function() {  $ ("#test2"). HTML ("<b>hello world!</b>") ;}); $ ("#btn3"). Click (function() {  $ ("#test3"). Val ("Dolly Duck");});

the callback function for text (), HTML (), and Val ( )

The three jQuery methods above: Text (), HTML (), and Val () also have a callback function. The callback function consists of two parameters: the subscript of the current element in the selected element list, and the original (old) value. Then return the string you want to use with the new value of the function.

The following example shows the text () and HTML () with a callback function:

Instance

$ ("#btn1"). Click (function() {  $ ("#test1"). Text (function(i,origtext) {     return "Old text:" + origtext + " New text:hello world!    " + i + ")";  });}); $ ("#btn2"). Click (function() {  $ ("#test2"). HTML (function(i, Origtext) {    return ' old HTML: ' + origtext + ' New html:hello <b>world!</b>    /c18> "+ i +") ";  }";});

Setting Properties-attr ()

The JQuery attr () method is also used to set/change property values.

The following example shows how to change the value of the href attribute in the (set) Link:

Instance

$ ("button"). Click (function() {  $ ("#w3s"). attr ("href", "http://www.w3school.com.cn/jquery" );});

The attr () method also allows you to set multiple properties at the same time.

The following example shows how to set the href and title properties at the same time:

Instance

$ ("button"). Click (function() {  $ ("#w3s"). attr ({    "href": "// Www.w3school.com.cn/jquery ",    " title ":" W3school jquery Tutorial "  }) ;

callback function for attr ()

The JQuery Method attr () also provides a callback function. The callback function consists of two parameters: the subscript of the current element in the selected element list, and the original (old) value. Then return the string you want to use with the new value of the function.

The following example shows the attr () method with a callback function:

Instance

$ ("button"). Click (function() {  $ (i,origvalue) {    return Origvalue + "/jquery";  } );

JQuery-Adding elements

With JQuery, it's easy to add new elements/content.

Add a new HTML content

We'll learn the four jQuery methods for adding new content:

• Append ()-inserts content at the end of the selected element
• Prepend ()-Inserts content at the beginning of the selected element
• After ()-Inserts the content after the selected element
• Before ()-insert content before selected element

jQuery Append () method

The JQuery append () method inserts the content at the end of the selected element.

Instance

$ ("P"). Append ("Some appended text.");

jQuery prepend () method

The JQuery prepend () method inserts content at the beginning of the selected element.

Instance

$ ("P"). Prepend ("Some prepended text.");

adding several new elements through the Append () and prepend () methods

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

However, the Append () and prepend () methods can receive an unlimited number of new elements through parameters. You can use JQuery to generate text/html (as in the example above), or through JavaScript code and DOM elements.

In the following example, we create a number of new elements. These elements can be created by text/html, JQuery, or javascript/dom. We then append these new elements to the text (as valid for prepend () using the Append () method:

Instance

function AppendText () {var txt1= "<p>Text.</p>";               // Create new elements in HTML var txt2=$ ("<p></p>"). Text ("text.");   // Create a new element in JQuery var txt3=document.createelement ("P");  // Create a new element in DOM txt3.innerhtml= "Text." ; $ ("P"). Append (TXT1,TXT2,TXT3);         // Append new Element }

JQuery after () and before () methods

The JQuery after () method inserts content after the selected element.

The JQuery before () method inserts content before the selected element.

Instance

$ ("img"). After ("Some text after"); $ ("IMG"). Before ("Some text before");

adding several new elements through the After () and before () methods

The After () and before () methods can receive an unlimited number of new elements through parameters. You can create new elements through text/html, JQuery, or javascript/dom.

In the following example, we create several new elements. These elements can be created by text/html, JQuery, or javascript/dom. We then use the After () method to insert these new elements into the text (as valid for Before ()):

Instance

function Aftertext () {var txt1= "<b>i </b>";                    // Create new elements in HTML var txt2=$ ("<i></i>"). Text ("Love");     // Create new elements with JQuery var txt3=document.createelement ("big");  // Create a new element from the DOM txt3.innerhtml= "jquery!" ; $ ("IMG"). After (TXT1,TXT2,TXT3);          // Insert new element after IMG }

Thanks: Thank you for your patience and reading!

jquery Get set values, add elements in a detailed