溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
