JQuery provides a function example for dynamically adding nodes and traversing nodes.

JQuery provides a function example for dynamically adding nodes and traversing nodes.

This example describes how jQuery can dynamically add and traverse nodes. We will share this with you for your reference. The details are as follows:

Add nodes dynamically:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Traverse nodes:
HTML section:
Js section:
<Script type = "text/javascript"> // node traversal/* -- next () the method is used to obtain the first "same-class peer" element after a node -- */$ (function () {$ ("div "). click (function () {alert ($ (this ). next ("div "). text () // effect: BB pops up when you click AA, and CC pops up when you click BB, when you click CC, an empty warning box is displayed (because the div node CC is followed by a p element, an empty warning box is displayed ), when FF is clicked, KK is displayed. When KK is clicked, an empty warning box is displayed. (because there is no peer div element behind the div node of KK, therefore, an empty warning box is displayed. The/* -- nextAll () method is used to obtain all peer elements after the node -- */$ ("div, p "). click (function () {alert ($ (this ). nextAll (). text (); // when you click the div tag or p tag, the text () ;}) $ ("div, p "). click (function () {alert ($ (this ). nextAll ("p "). text (); // when you click the div label or p label, the text () ;}) $ ("div") of all p labels after the current label is clicked is displayed "). click (function () {$ (this ). nextAll ("div" ).css ("background", "red"); // set the background of all div labels following the div label to red when you click the div label }) $ ("div "). click (function () {$. each ($ (this ). nextAll ("div"), function () {detail (this).css ("background-color", "red ")}) // when you click the div label, set the background of all the div labels behind it to red, which is the same as the above one (explanation: first, retrieve all the div labels behind the currently clicked div label, traverse it, and then set the background of all the div labels to Red through the anonymous function) note that the preceding and following two "this" mean different: the preceding "this" refers to the currently clicked div tag, and the thi behind it is: after obtaining the "next div tag" of the currently clicked div tag, traverse each of their div, And the thi behind it is: in the next step, the anonymous function is processing the "currently traversed div tag" [the previous step is the currently clicked div, and the current div actually processed by the next anonymous function ]}) $ ("div, p "). click (function () {// ((thisground .css ("background", "red"); ((this(.siblings(..css ("background", "yellow "); // set the background of the currently clicked div or P tag to red, and the background of other sibling tags to yellow (this).css ("background", "red" ..siblings().css ("background ", "yellow"); // equivalent to the above sentence})} </script>