javascript核心技术(二十八)jq的标签节点操作(一) 创建节点与添加节点到DOM树

[复制链接]
查看: 1066|回复: 31
发表于 2023-1-25 20:37:16 | 显示全部楼层 | 阅读模式
在前面我们已经把原生的节点操作中的核心语法全部讲完了,下面我们继续来看jq的节点操作语法。
相比原生的节点操作而言,使用JQ操作更为简单。
当然,使用jq前需要先引入jquery库文件
  1. <script src="./jquery.js"></script>
复制代码


请看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <div id="box">
        <span id="span1" name="spanname" value="spanvalue" class="spanclass" sx="spansx">这是span1</span>
        <span id="span2">这是span2</span>
        <span id="span3">这是span3</span>
    </div>
    <div id="box1"></div>
    <div id="box2">

    </div>
</body>
<script>
    var a='<a href="www.baidu.com">向父元素添加子元素到前</a>';
    var $jd=$(a);//创建一个节点
    $('#box').prepend($jd);//向父元素添加子元素到前
    var a='<a href="www.baidu.com">向父元素添加子元素到后</a>';
    var $jd=$(a);//创建一个节点
    $('#box').append($jd);//向父元素添加子元素到后
    var a='<a href="www.baidu.com">添加到当前元素前</a>';
    var $jd=$(a);//创建一个节点
    $('#box').before($jd);//添加到当前元素前
    var a='<a href="www.baidu.com">添加到当前元素后</a>';
    var $jd=$(a);//创建一个节点
    $('#box').after($jd);//添加到当前元素后
</script>
</html>


执行结果如下:

javascript核心技术(二十八)jq的标签节点操作(一)  创建节点与添加节点到DOM树

是不是很简单呢?当然,上面我们把创建好的标签分别添加到了元素前后与元素内的前后,以上就是关于创建节点与添加节点到DOM树的操作。

易博软件介绍

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-2-19 05:30:29 | 显示全部楼层
不错~~~~~~~~~~但是我的水平还没这么高!!!!

3

主题

203

帖子

107

积分

营销菜鸟

Rank: 3Rank: 3

积分
107
发表于 2023-3-2 09:02:47 | 显示全部楼层
^中国的程序员要努力呀!  楼主的话很是受用  中国的程序员要努力呀!  我想应该更多的人把他们的经写出来,这样好让咋们中国人少走一些弯路  希望我们共同奋斗,为了自己的理想,拼了!呵呵

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-12 21:32:21 | 显示全部楼层
就像楼上说的那样,我也不知道自己是第几个回帖的,但是看了这篇文章后我没有办法不让自己回,是啊,我今年大2了,很多同学说编程难,都去学网页什么的了,而我却一早把自己出卖给了编程,我学的是C/C++,真的很难,不过我仍然在坚持,我也不知道前途会怎样,我只知道做自己最想做的事,就好了,很开心认识大家!!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-23 00:10:34 | 显示全部楼层
跪读

0

主题

16

帖子

9

积分

营销入门

Rank: 2

积分
9
发表于 2023-3-28 07:04:38 | 显示全部楼层
^哈哈~~~你真笑死我了,再重新看看吧~~~

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-4-2 20:16:15 | 显示全部楼层
^台湾是中国不可分割的领土!!!

0

主题

24

帖子

13

积分

营销入门

Rank: 2

积分
13
发表于 2023-4-8 07:34:04 | 显示全部楼层
我也是所谓的学计算机的,但是现在都大三了,对编程,哎!!能力真的不可恭维呀  我想问下高手们现在我还有没有的救呀?  不胜感谢!!!!  

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-13 03:26:27 | 显示全部楼层
你是我的小目标 呵呵
发表于 2023-4-17 18:30:22 | 显示全部楼层
^_^:    牢记前辈教诲    努力做一个优秀的程序员是我的梦想    大家加油!!..
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表