jQuery動態建立html元素並設定屬性

admin發表於2017-04-05
jQueryHTML

本章節通過程式碼例項介紹一下如何利用jQuery動態建立html元素，兵設定其屬性。

下面直接看程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.antzone{
  width:200px;
  height:100px;
  background:green;
 }
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("<div></div>",{
    class:"antzone",
    softwhy:"done"
  }).appendTo("body")
});
</script>
</head>
<body>
 
</body>
</html>

上面的程式碼動態建立一個div元素，並且為此div元素設定屬性。

下面介紹一下此方法的規則:

第一個引數可以是手寫的或者是由其他途徑傳遞過來的字串。

這個字串可以包含斜槓 (比如一個影像地址)，還有反斜槓。

當你建立單個元素時，請使用閉合標籤或 XHTML 格式。

例如，建立一個span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推薦 $("<span>")。

在 jQuery 中，這個語法等同於 $(document.createElement("span"))。

特別說明:

jQuery()方法會檢測第一個引數是html，還是其他字串，是html就建立相應的html元素，否則就當做一個選擇器來處理。

相關文章