1、节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#hd{
width: 600px;
height: 500px;
border: 2px solid blue;
}
</style>
<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#dd').click(function(){
// 创建一个新的h2标签
// 在jquery中创建新标签只需要将标签最终的代码写成字符串形式即可
// var newH = '<h2 class="hd">我是新来的！</h2>';
//// 将新创建的标签追加到box里 append:添加,在#box里面一堆h2标签后面加
// $('#box').append(newH);
// (第1种写法)把#aa追加进#box里面的最后
// $('#box').append($("#aa"));
// (第2种写法) 将#aa加进#box里面的最后
// $('#aa').appendTo($("#box"));
//// 从头部追加
// $("#box").prepend($('#aa'));
//// prependTo也是从头部追加 反过来写
// $("#aa").prependTo($('#box'));
//
// 插队:中间插入
// after:后面 在eq(1)后面插入
// $("#box h2").eq(1).after($("#aa"));
//// 插队:中间插入反过来写法和上面的效果一样的
// $("#aa").insertAfter($("#box h2").eq(1));
// 插队:中间插入
// before:前面 在eq(1)前面插入
// $("#box h2").eq(1).before($("#aa"));
// 和上面的一样,位置倒过来写
$("#aa").insertBefore($("#box h2").eq(1));
})
})
</script>
</head>
<body>
<h1 id="aa">这个是h1标签</h1>
<input type="button" name="" id="dd" value="来点我呀" />
<br /><br />
<div id="box">
<h2>如果你是工作经验小于2年的朋友0</h2>
<h2>如果你是工作经验小于2年的朋友1</h2>
<h2>如果你是工作经验小于2年的朋友2</h2>
<h2>如果你是工作经验小于2年的朋友3</h2>
<h2>如果你是工作经验小于2年的朋友4</h2>
<h2>如果你是工作经验小于2年的朋友5</h2>
<h2>如果你是工作经验小于2年的朋友6</h2>
</div>
</body>
</html>
上面代码效果图片
原文链接：https://www.qiquanji.com/post/7662.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知