利用jQuery在指定元素中新增html元素

admin發表於2017-03-27
jQueryHTML

本章節分享一個封裝的函式，它能夠實現在指定的元素中新增html元素，非常的便利，有需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var a = buildHTML("a","softwhy.com",{
    id: "thelink",
    href:"http://www.softwhy.com"
  });
   
  $('#one').append(a);
   
  var input=buildHTML("input",{
    id:"antzone",
    type:"text",
    value:"螞蟻部落"
  });
   
  $('#two').append(input);
});
   
buildHTML=function(tag,html,attrs){
  if(typeof(html)!='string'){
    attrs=html;
    html=null;
  }
  var h='<' + tag;
  for(attr in attrs){
    if(attrs[attr]===false) continue;
    h += ' ' + attr + '="' + attrs[attr] + '"';
  }
  return h += html ? ">" + html + "</" + tag + ">" : "/>";
};
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.buildHTML=function(tag,html,attrs){}，此函式實現了在指定元素中新增html元素的效果，第一個引數是標籤的名稱，第二個引數是html中的內容，比如<div>softwhy.com</div>中的softwhy.com就是html規定的，第三個引數是html元素的屬性，用物件直接量方式規定。

3.if(typeof(html)!='string'){  attrs=html;

  html=null;

}，此段程式碼說明第二個引數是可選的，裡面進行一下轉換。

4.var h='<' + tag;，宣告一個變數用來儲存新建立的html元素字串。

5.for(attr in attrs){

  if(attrs[attr]===false) continue;

  h += ' ' + attr + '="' + attrs[attr] + '"';

}，通過遍歷方式設定html元素的屬性。

6.return h += html ? ">" + html + "</" + tag + ">" : "/>"，三元運算子方式經選取連線的字串。

二.相關閱讀:

1.append()函式可以參閱jQuery append()一章節。

2.三元運算子可以參閱三元運算子用法詳解一章節。

相關文章