# jQuery 屬性方法

## .attr()

返回屬性的值
`$(selector).attr(attribute)`
設置屬性和值
`$(selector).attr(attribute,value)`
使用函數設置屬性和值
`$(selector).attr(attribute,function(index,currentvalue))`
設置多個屬性和值
`$(selector).attr({attribute:value, attribute:value,...})`

## 添加元素
append()、 appendTo()：在選擇元素的結尾插入內容。
prepend() 、 prependTo() : 在選擇元素的開頭插入內容。
after() 、 insertAfter() : 在選擇元素的之後插入內容。
before() 、 insertBefore(): 在選擇元素的之前插入內容。

>舉例

$(".class").append(物件)
物件.appendTo( $(".class") );

### [append() 方法](http://www.zhu-xuan.com.tw/hexo//myexercise/note/append/append.html)
>html

<p>這是標題</p>
<ol>
  <li>列表 1</li>
  <li>列表 2</li>
  <li>列表 3</li>
</ol>
<button id="btn1">增加標題</button>
<button id="btn2">增加列表</button>

>script

$(function () {
  $("#btn1").click(function () {
    $("p").append("<b>append 文字</b>");  //選擇元素結尾.append(要插入的內容)
  });
  $("#btn2").click(function () {
    $("ol").append("<li>append 列表</li>")
  });
})

### [prepend() 方法](http://www.zhu-xuan.com.tw/hexo//myexercise/note/append/prepend.html)
>html

<p>這是標題</p>
<ol>
  <li>列表 1</li>
  <li>列表 2</li>
  <li>列表 3</li>
</ol>
<button id="btn1">增加標題</button>
<button id="btn2">增加列表</button>

>script

$(function () {
  $("#btn1").click(function () {
    $("p").prepend("<b>append 文字</b>");  //選擇元素開頭.prepend(要插入的內容)
  });
  $("#btn2").click(function () {
    $("ol").prepend("<li>append 列表</li>")
  });
})

### [after() / before 方法](http://www.zhu-xuan.com.tw/hexo//myexercise/note/append/after-before.html)
>html

<span> 這是標題 </span>
<br><br>
<button id="btn1">在標題前面增加文字</button>
<button id="btn2">在標題後面增加文字</button>

>script

$(function () {
  $("#btn1").click(function () {
    $("span").before("<b>Before</b>");  //選擇元素之前.before(要插入的內容)
  });
  $("#btn2").click(function () {
    $("span").after("<i>After</i>")     //選擇元素之後.after(要插入的內容)
  });
})