在前面我们已经把原生的节点操作中的核心语法全部讲完了，下面我们继续来看jq的节点操作语法。
相比原生的节点操作而言，使用JQ操作更为简单。
当然，使用jq前需要先引入jquery库文件
- <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>
执行结果如下：
是不是很简单呢？当然，上面我们把创建好的标签分别添加到了元素前后与元素内的前后，以上就是关于创建节点与添加节点到DOM树的操作。
|
窥视卡
雷达卡
发表于 2023-1-25 20:37:16
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 05:30:29
