Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to add child nodes in jquery". The explanation in this article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to add child nodes in jquery".

Add methods: 1, use "parent node .append (child node)" statement; 2, use "parent node .prepend (child node)" statement; 3, use "child node .appendto (parent node)" statement; 4, use "$(child node) .append (parent node)" statement.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jquery, there are several ways to add child nodes to the parent node:

Append (): inserts content into the "end" inside the selected element.

AppendTo (): inserts content into the "end" inside the selected element.

Prepend (): inserts content into the "start" inside the selected element.

PrependTo (): inserts content into the "start" inside the selected element.

Example:

$(function () {/ / 1.append (); / / parent node .append (child node); / / added as the last child element. Click ('# btnAppend') .click (function () {/ / 1.1 create a new li tag and append it to ul1 / / var $newLi = $('I am the newly created li tag'); / / $('# ul1'). Append ($newLi); / / 1.2 get a li tag in ul1 and append it to ul1. / / cut and add as the last child element. / / var $li3 = $('# li3'); / / $('# ul1'). Append ($li3); / / 1.3 get a li tag in ul2 and append it to ul1. / / cut and add as the last child element. Var $li32 = $('# li32'); $('# ul1'). Append ($li32);}); / / 2.prepend () / / parent node .prepend (child node); / / added as the first child element. Click ('# btnPrepend') .click (function () {/ / 2.1create a new li tag and append it to ul1 / / var $newLi = $('I am the newly created li tag'); / / $('# ul1'). Prepend ($newLi); / / 2.2 get a li tag in ul1 and append it to ul1. / / cut and add as the last child element. / / var $li3 = $('# li3'); / / $('# ul1'). Prepend ($li3); / / 2.3 get a li tag in ul2 and append it to ul1. / / cut and add as the last child element. Var $li32 = $('# li32'); $('# ul1'). Prepend ($li32);}); / / 3.appendTo (); / / child node .appendto (parent); / / added as the last child element. ('# btnAppendTo') .click (function () {/ / 1.1 create a new li tag, append to ul1 var $newLi = $('I am the newly created li tag'); $newLi.appendTo ($('# ul1'));}); / / 4.prependTo () / / child node .prependTo (parent); / / add as the first child element. Click ('# btnPrependTo') .click (function () {/ / 1.1create a new li tag and append it to ul1 var $newLi = $('I am the newly created li tag'); $newLi.prependTo ($('# ul1'));});}) I'm the first li tag, I'm the second li tag, I'm the third li tag, I'm the fourth li tag, I'm the fifth li tag, I'm the first li tag, I'm the second li tag, I'm the third li tag 2, I'm the fourth li tag 2, I'm the fifth li tag 2.

Thank you for your reading, the above is the content of "how to add child nodes in jquery". After the study of this article, I believe you have a deeper understanding of how to add child nodes in jquery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.