JQuery中的节点操作

1.append 和 appednTo

append：
内容追加到元素内容之后

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      $('#box').append('<span></span>')
    })
  </script>

appednTo：
把内容追加到元素内容之后

$('<span>111</span>').appendTo($('#box'))

2. prepend 和prependTo

prepend：追加到元素的内容之前
prependTo：追加到元素的内容之前

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      $('#box').prepend('<h1></h1>')
      $('<span>111</span>').prependTo('#box')
    })
  </script>

3.外部插入

after：元素之后插入
before：元素之前插入

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      $('#box').after('<h1>111</h1>')
	  $('#box').before('<h1>111</h1>')
    })
  </script>

4. 元素包裹

wrap：包裹元素

<div id='box'>
    11
  </div>
  <script>
$(function () {
	$('#box').wrap('<div></div>')
})
</script>

unwrap：移除包裹元素

$('#box').unwrap('<div></div>')

wrapAll：找到的同类元素全部包起来
wrapInner：把元素的字内容全部包起来

5. 元素替换

替换内容和html标签

replaceWith：元素替换

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      $('#box').replaceWith('<div><div>')
    })
  </script>

replaceAll：元素替换

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      $('<div><div>').replaceAll('#box')
    })
  </script>

clone：元素克隆

<div id='box'>
    11
  </div>
  <script>
    $(function () {
      console.log($('#box').clone());
    })
  </script>

6.删除节点

清除所有子节点 empty
删除全部元素 remove