溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
1 動態(tài)創(chuàng)建節(jié)點
1-1 通過jsp最原生的方法來創(chuàng)建節(jié)點
詳細說明請查看點擊此處查看
<!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>動態(tài)創(chuàng)建div節(jié)點</h2>
<!-- 創(chuàng)建div標(biāo)簽 并引用 我們定義的樣式 -->
<div class="hh">
<div class="addDiv">點擊頁面會動態(tài)創(chuàng)建元素節(jié)點
</div>
</div>
<script type="text/javascript">
//從DOM選取元素
var body = document.querySelector('body');
//為document添加點擊事件
document.addEventListener('click',function(){
//創(chuàng)建兩個div
var div1 = document.createElement('div')
var div2 = document.createElement("div");
//設(shè)置屬性
div1.setAttribute('class','hh')
div2.className='addDiv'
//向div中添加文本
div2.innerHTML="動態(tài)創(chuàng)建div";
//設(shè)置加入文檔，也就是包含關(guān)系
div1.appendChild(div2)
body.appendChild(div1)
},false)
</script>
</body>
</html>效果圖： 1-1
1-2 通過jQuery方法來創(chuàng)建節(jié)點
常用的方法就是通過$(" html 結(jié)構(gòu) ") 這樣的函數(shù)結(jié)構(gòu)進行處理
<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' >動態(tài)創(chuàng)建div </div></div>");
$body.append(div);
});
</script>
</body>
</html>
動態(tài)創(chuàng)建的元素是不夠的，它只是臨時存放在內(nèi)存中，最終我們需要放到頁面文檔并呈現(xiàn)出來。將創(chuàng)建的元素放到文檔上，
這里就涉及到一個位置關(guān)系，常見的就是把這個新創(chuàng)建的元素，當(dāng)作頁面某一個元素的子元素放到其內(nèi)部。針對這樣的處理，jQuery就定義2個操作的方法
append：這個操作與對指定的元素執(zhí)行原生的appendChild方法，將它們添加到文檔中的情況類似。
appendTo：實際上，使用這個方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
2-1 .append()和.appendTo() 方法的不同之處
.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內(nèi)容和目標(biāo)的位置不同
append()前面是要選擇的對象，后面是要在對象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容，而后面是要選擇的對象
<!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方法來添加的節(jié)點使用的樣式 */
.append {
background-color: blue;
margin-top: 10px;
}
/* 通過appendTo方法來添加的節(jié)點使用的樣式 */
.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都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點
2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面
2個方法都支持多個參數(shù)傳遞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添加元素 顯示區(qū)域使用樣式 */
.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 >多參數(shù)</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on(
'click',
function() {
//在匹配test1元素集合中的每個元素后面插入p元素
$(".test2").after(
'<p >after,在匹配元素之后增加</p>',
'<p >多參數(shù)</p>')
})
</script>
</body>
</html>效果圖： 10-1
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
