jQuery append()

admin發表於2018-02-02
jQueryAPP

此方法可以向匹配元素集合中的每一個元素內的尾部新增指定內容。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.append(content [,content])

引數解析:

（1）.content:規定插入匹配元素內部的內容，可以是DOM元素，文字節點，元素和文字節點的陣列，HTML字串，或者jQuery物件。

（2）.content:可選，規定插入匹配元素內部的內容，可以是DOM元素，文字節點，元素和文字節點的陣列，HTML字串，或者jQuery物件。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.append(function(index, oldHtml))

引數解析:

function:返回被插入內容的函式。index：可選，當前元素在匹配元素集合中的索引，oldHtml：可選，當前元素原來的HTML內容。函式中的this指向當前元素。

jQuery1.4版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function () {
    $("ul").append("<li>螞蟻部落四</li>");
  })
}) 
</script>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

將新內容新增到ul元素內部的尾部。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function () {
    var $li=$("<li>螞蟻部落五</li>");
    $("ul").append("<li>螞蟻部落四</li>", $li);
  })
}) 
</script>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

append()方法可以具有多個引數。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function () {
    $("ul").append(function () {
      return "<li>螞蟻部落四</li>";
    });
  })
}) 
</script>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

方法要新增的內容是通過一個函式返回的。

相關文章