1 动态创建节点
1-1 通过jsp最原生的方法来创建节点
详细说明请查看点击此处查看
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> 这是使用 jquery的第一个案例 </title>
<style>
.hh{
width: 200px;
height:1 00px;
padding: 10px;
margin: 5px;
float: left;
border: 2px solid #ccc;
background: #bbffaa;
}
</style>
</head>
<body>
<h2>动态创建div节点</h2>
<!-- 创建div标签 并引用 我们定义的样式 -->
<div class="hh">
<div class="addDiv">点击页面会动态创建元素节点
</div>
</div>
<script type="text/javascript">
//从DOM选取元素
var body = document.querySelector('body');
//为document添加点击事件
document.addEventListener('click',function(){
//创建两个div
var div1 = document.createElement('div')
var div2 = document.createElement("div");
//设置属性
div1.setAttribute('class','hh')
div2.className='addDiv'
//向div中添加文本
div2.innerHTML="动态创建div";
//设置加入文档，也就是包含关系
div1.appendChild(div2)
body.appendChild(div1)
},false)
</script>
</body>
</html>效果图： 1-1
1-2 通过jQuery方法来创建节点
常用的方法就是通过$(" html 结构 ") 这样的函数结构进行处理
<DOMTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style >
.div_style{
width:200px;
height:100px;
padding:5px;
margin:10px;
float: left;
border: 2px solid #ccc;
background: yellow;
}
</style>
</head>
<body >
<div class="div_style">
<div class="child"> 通过jquery来添加 div
</div>
</div>
<script type="text/javascript">
var $body = $('body');
$body.on('click',function(){
var div = $("<div class='div_style' ><div class='child' >动态创建div </div></div>");
$body.append(div);
});
</script>
</body>
</html>动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。将创建的元素放到文档上，
这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
2-1 .append()和.appendTo() 方法的不同之处
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是要选择的对象
<!DOCTYPE html>
<html>
<head>
<title>addDiv2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.content {
width: 300px;
height: 100px;
}
/* 通过append方法来添加的节点使用的样式 */
.append {
background-color: blue;
margin-top: 10px;
}
/* 通过appendTo方法来添加的节点使用的样式 */
.appendTo {
background-color: red;
margin-top: 5px;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<h3>通过append与appendTo添加元素</h3>
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<!-- 添加div 的位置 -->
<div class="content"></div>
<script type="text/javascript">
$("#bt1").on('click', function() {
$(".content").append('<div class="append">通过append方法添加的元素</div>');
});
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
$('<div class="appendTo">通过appendTo方法添加的元素</div>')
.appendTo($(".content"));
});
</script>
</body>
</html>
效果图 9-1
before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码
注意点：
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
<!DOCTYPE html>
<html>
<head>
<title>addDiv3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 添加依赖库 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
/*点击通过jQuery的before添加元素 显示框 使用样式 */
.contentBefore {
border: 2px solid red;
margin-top: 5px;
}
/* 点击通过jQuery的after添加元素 显示区域使用样式 */
.contentAfter {
border: 2px solid #e6e6e6;
margin-top: 5px;
}
</style>
</head>
<body>
This is my HTML page.
<br>
<h3>通过before与after添加元素</h3>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="contentBefore">
<p class="test1">测试before</p>
</div>
<div class="contentAfter">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on(
'click',
function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before(
'<p >before,在匹配元素之前增加</p>',
'<p >多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after(
'<p >after,在匹配元素之后增加</p>',
'<p >多参数</p>')
})
</script>
</body>
</html>效果图： 10-1
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
