The example in this article describes the method of inserting DOM nodes with JQuery. Share it with everyone for your reference. The specific analysis is as follows:
Dynamically creating HTML elements is of no practical use, as the newly created elements need to be inserted into the document. The simplest way to insert a newly created node into a document is to make it a child node of a node in the document. Previously we used a method append() to insert nodes, which will append the newly created content inside the element.
There is not only one way to insert a newly created node into a document. JQuery also provides other ways to insert nodes, as shown in the table below. Readers can flexibly make a variety of choices based on actual needs.
HTML DOM structure is as follows:
<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p> <ul class="nm_ul"> <li title='PHP编程'>简单易懂的PHP编程</li> <li title='JavaScript编程'>简单易懂的JavaScript编程</li> <li title='JQuery编程'>简单易懂的JQuery编程</li> </ul>
append()
Append content inside each matching element:
HTML code:
I want to say:
jQuery code:
Result:
I want to say: Hello> ;
appendTo()
Append all matching elements to the specified element. In fact, using this method reverses the regular $(A).append(B) operation, that is, instead of appending B to A, appending A to B:
HTML code:
I want to say:
jQuer code:
Result:
I want to say: Hello> ;
prepend()
Prepend content inside each matching element:
HTML code:
I want to say:
jQuer code:
Result:
Hello I want to say :
prependTo()
Prepend all matching elements to the specified element. In fact, using this method reverses the regular $(A).prepend(B) operation, that is, instead of prepending B to A, A is prepended to B:
HTML code:
I want to say:
jQuer code:
Result:
Hello I want to say :
after()
Insert content after each matching element:
HTML code:
I want to say:
jQuer code:
Result:
I want to say:
You GoodinsertAfler()
Insert all matching elements after the specified element. In fact, using this method reverses the regular $(A).after(B) operation, that is, instead of inserting B after A, A is inserted after B:
HTML code:
I want to say:
jQuer code:
Result:
I want to say:
You Goodbefore()
Insert content before each matching element:
HTML code:
I want to say:
jQuer code:
Result:
I want to say :
insertBefore()
Push all matching elements in front of the specified element. In fact, using this method reverses the regular $(A).before(B) operation, that is, instead of inserting B before A, insert A before B:
HTML code:
I want to say:
jQuer code:
Result:
I want to say :
这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作:
$(function(){ var $li_1 = $("<li title='新增节点:数据结构'>新增节点:数据结构</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='新增节点:设计模式'>新增节点:设计模式</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='新增节点:计算机算法'>新增节点:计算机算法</li>"); // 创建第三个<li>元素 var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点 var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $("#btn_1").click(function(){ $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示 }); $("#btn_2").click(function(){ // 可以采取链式写法:$parent.append($li_1).append($li_2); $parent.append($li_2); }); $("#btn_3").click(function(){ // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后 $li_3.insertAfter($two_li); }); });
也利用它们对原有的DOM元素进行移动:
$(function(){ var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点 $two_li.insertBefore($one_li); //移动节点 });
希望本文所述对大家的jQuery程序设计有所帮助。

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

JavaScript does not require installation because it is already built into modern browsers. You just need a text editor and a browser to get started. 1) In the browser environment, run it by embedding the HTML file through tags. 2) In the Node.js environment, after downloading and installing Node.js, run the JavaScript file through the command line.

How to send task notifications in Quartz In advance When using the Quartz timer to schedule a task, the execution time of the task is set by the cron expression. Now...


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SublimeText3 Linux new version
SublimeText3 Linux latest version

WebStorm Mac version
Useful JavaScript development tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

Atom editor mac version download
The most popular open source editor