Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

The method of manipulating element nodes by jQuery

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly explains "how to operate element nodes in jQuery". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to operate element nodes with jQuery".

First, find nodes

Example:

Node operation $(function () {/ / find node / / get h3 tag and hide it $("h3") .hide (); / / get Li element and add background color $("li") .css ("background-color", "red");}) The popular animation name Detective Conan Alai Sea Thief King

Effect:

Create and insert nodes 1. Create nodes

The factory function $() is used to get or create nodes. The syntax is as follows:

For example:

2. Insert child nodes

Insert child nodes inside the element with the following syntax:

3. Insert peer node

The peer node is inserted outside the element with the following syntax:

Example:

Node operation $(function () {/ / find node / / get h3 tag and hide it $("h3") .hide (); / / get Li element and add background color $("li") .css ("background-color", "red") / / create node var $newNode=$ ("Naruto"); / / create li element node with text / / add child node $("ul") .append ($newNode); $($newNode) .appendTo ($("ul")) / / pre-insert child nodes are added to the first location $("ul") .prepend ($newNode); $($newNode) .prependTo ($("ul")); / / insert peer nodes after the element / / create the ul tag var $newheader=$ ("popular Movie ranking"); $("H3") .after ($newheader) $($newheader) .insertAfter ($("h3")); / / insert peer node $("h3") .before ($newheader) before the element; $($newheader) .insertBefore ($("h3"));}) Popular animation name Detective Conan Alai Sea Thief King III, replacement node

ReplaceWith () and replaceAll () are used to replace nodes, for example:

Example:

Node operation $(function () {/ / find node / / get h3 tag and hide it $("h3") .hide (); / / get Li element and add background color $("li") .css ("background-color", "red") / / create node var $newNode=$ ("Naruto"); / / create li element node with text / / add child node $("ul") .append ($newNode); $($newNode) .appendTo ($("ul")) / / pre-insert child nodes are added to the first location $("ul") .prepend ($newNode); $($newNode) .prependTo ($("ul")); / / insert peer nodes after the element / / create the ul tag var $newheader=$ ("popular Movie ranking"); $("H3") .after ($newheader) $($newheader) .insertAfter ($("h3")); / / insert peer node $("h3") .before ($newheader) before the element; $($newheader) .insertBefore ($("h3")); / / replace node $("ul li:eq (1)") .replaceWith ($newNode) $($newNode). ReplaceAll ($("ul li:eq (1)");}); popular animation name Detective Conan Alai Sea Thief King IV, copy node

Clone () is used to copy nodes. The syntax is as follows:

Note:

Example:

Node operation $(function () {/ / find node / / get h3 tag and hide it $("h3") .hide (); / / get Li element and add background color $("li") .css ("background-color", "red") / / create node var $newNode=$ ("Naruto"); / / create li element node with text / / add child node $("ul") .append ($newNode); $($newNode) .appendTo ($("ul")) / / pre-insert child nodes are added to the first location $("ul") .prepend ($newNode); $($newNode) .prependTo ($("ul")); / / insert peer nodes after the element / / create the ul tag var $newheader=$ ("popular Movie ranking"); $("H3") .after ($newheader) $($newheader) .insertAfter ($("h3")); / / insert peer node $("h3") .before ($newheader) before the element; $($newheader) .insertBefore ($("h3")); / / replace node $("ul li:eq (1)") .replaceWith ($newNode) $($newNode) .replaceAll ($("ul li:eq (1)")); / / copy node $("ul li:eq (1)") .clone (true) .appendto ("ul"); / / output the element itself html alert ($(") .append ($(" ul li:eq (1) ") .clone (true)) .html ();}) Popular animation name Detective Conan Alai Sea Thief King V, delete node

JQuery provides three ways to delete nodes:

For example:

Example:

Node operation $(function () {/ / find node / / get h3 tag and hide it $("h3") .hide (); / / get Li element and add background color $("li") .css ("background-color", "red") / / create node var $newNode=$ ("Naruto"); / / create li element node with text / / add child node $("ul") .append ($newNode); $($newNode) .appendTo ($("ul")) / / pre-insert child nodes are added to the first location $("ul") .prepend ($newNode); $($newNode) .prependTo ($("ul")); / / insert peer nodes after the element / / create the ul tag var $newheader=$ ("popular Movie ranking"); $("H3") .after ($newheader) $($newheader) .insertAfter ($("h3")); / / insert peer node $("h3") .before ($newheader) before the element; $($newheader) .insertBefore ($("h3")); / / replace node $("ul li:eq (1)") .replaceWith ($newNode) $($newNode) .replaceAll ($("ul li:eq (1)")); / / copy node $("ul li:eq (1)") .clone (true) .appendto ("ul"); / / output the element itself html alert ($(") .append ($(" ul li:eq (1) ") .clone (true)) .html ()) / / Delete node $("ul li:eq (1)") .remove (); $("ul li:eq (1)") .detach (); $("ul li:eq (1)") .empty (); / / only clear node content}) The popular animation name Detective Conan Alai Sea Thief King has come here. I believe you have a deeper understanding of "the method of operating element nodes in jQuery". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report