jQuery基础修炼圣典—DOM篇

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/huangsuhong/blog/675205

文章标签：

#javascript #python #ViewUI

本文详细介绍了使用JQuery进行DOM操作的方法，包括节点创建、插入、追加等常见操作，并通过具体实例展示了不同方法的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

今日在imooc在学习了有关DOM的语法，现在就来总结一下：

JQuery：

1.DOM节点的创建
$("<div id='test' class='aaron'>我是文本节点</div>")
例子：

var $body = $('body');
$body.on('click', function(){
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>");
$body.append(div);
});

2.DOM节点的插入

（1）内部插入append()与appendTo()

append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是要选择的对象

例子：

$("#bt1").on('click', function(){
$(".content").append('<div class="append">通过append方法添加的元素</div>');
});

$("#bt2").on('click', function(){
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"));
});

（2）外部插入after()与before()

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

例子：

$("#bt1").on('click', function(){
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>');
});

$("#bt2").on('click', function(){
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>');
});

（3）内部插入prepend()与prependTo()

例子：

$("#bt1").on('click', function(){
$('.aaron1').prepend('<p>prepend增加的p元素</p>');
});

$("#bt2").on('click', function(){
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'));
});

区别：

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

（4）外部插入insertAfter()与insertBefore()

例子：

$("#bt1").on('click', function(){
$('<p style="color:red">测试insertBefore方法增加</p>','<p style="color:red">多参数</p>').insertBefore($(".test1"));
});

$("#bt2").on('click', function(){
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"));
});

转载于:https://my.oschina.net/huangsuhong/blog/675205