JQuery学习之路Part6：元素的操作(添加元素、清空元素、克隆元素)

关注

原创最新推荐文章于 2026-08-23 11:39:25 发布 7.8k 阅读 AI 写同款· GEO 优化 ›

jQuery AJAX与Servlet通信的三大核心陷阱及解决方案 AJAX是Web前端与后端交互的基础技术，其本质是基于XMLHttpRequest的异步HTTP请求机制。理解请求路径解析、Content-Type协商、响应数据类型匹配这三大原理，是保障前后端可靠通信的技术前提。在Java Web传统栈中，jQuery作为轻量级AJAX封装工具，常与JSP和Servlet协同工作，但极易因上下文路径误配、字符编码不一致、JSON序列化/反序列化错位等问题导致404/500/乱码/解析失败等典型故障。本文聚焦于真实项目中最频发的路径构造、参数传递、响应解析三类问题，结合jQ 阅读详情

一、添加元素

prepend()：在被选元素的儿子的最前面插入内容
例：

$("p").prepend("Some text.");

prependTo()：插入在被选元素的儿子的最前面
例：

$("<b>Some text.</b>").prependTo("p")

区别：

a.prepend(b) = b.prependTo(a)

用途：对象不一样可以串联函数

append()：在被选元素的儿子的最后面插入内容
例：

$("p").append("Some text.");

appendTo()：插入在被选元素的儿子的最后面
例：

$("<b>Some text.</b>").appendTo("p")

区别：

a.append(b)=b.appendTo(a)

用途：对象不一样可以串联函数

before()：在被选元素的之前插入内容
例：

$("img").before("Some text before");

after()：在被选元素的之后插入内容
例：

$("img").after("Some text after");

批量添加若干新元素

例一：

function appendText()
{
	var txt1="<p>Text.</p>";// 以HTML的方式创建新元素
	var txt2=$("<p></p>").text("Text.");// 以JQuery的方式创建新元素
	var txt3=document.createElement("p");// 以DOM的方式创建新元素
	txt3.innerHTML="Text.";
	$("p").append(txt1,txt2,txt3);// 一次性追加新元素
}

例二：

function afterText()
{
	var txt1="<b>I </b>";// 以HTML的方式创建新元素
	var txt2=$("<i></i>").text("love ");// 通过JQuery的方式创建新元素
	var txt3=document.createElement("big");// 通过DOM的方式创建新元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);// 在img之后一次性批量插入新元素
}