第 5 章 操作 DOM

5.5 DOM 操作方法的简单归纳

（1）要在HTML中创建新元素，使用$()函数

（2）要在每个匹配元素中插入新元素，使用：

.append(content [, content]) （添加）

描述：在每个匹配元素里面的末尾插入参数内容

Additional Arguments

支持传递多个参数

<script>   var $newDiv1=$('<div id="object1" />'),           newDiv2=document.createElement('div'),           existingDiv1=document.getElementById('foo');    $('body').append($newDiv1,[newDiv2,existingDiv1]);   $('newDiv2').html('<p>hello</p>');</script>

.appendTo(target) (添加到)

描述：讲匹配的元素插入到目标元素的后面

.append()和.appendTo() 两种方法功能相同，主要的不同是语法----内容和目标的位置不同。对于.append()，选择表达式在函数的前面，参数是将要插入的内容。对于.append()刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记，它都将被插入到容器的末尾。

<script>   $('.inner').append('<p >new</p>')   $('<p>new</p>').appendTo('.inner');       $('.container').append($('h2'));    $('h2').appendTo($('.container'));</script>

.filter() 与 .find() 的区别

(1) 修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现。

    var $p=$('div.chapter p').eq(2).nextAll();    $('<a href="#top">back to top</a>').insertAfter($p);    $('<a id="top"></a>').prependTo('body');

(2) 在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。确保链接仍然有效。

    $('a[href$=#top]').click(function () {        $('<p>You were here</p>').insertAfter(this);    })

(3) 在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。

    $('#f-author').click(function () {        $(this).wrap('<b />');    });

(4) 挑战：在随后单击粗体作者名字时，删除之前添加的元素（也就是在粗体文本与正常文本之间切换）。

var tag=0;    $('#f-author').click(function () {        if(tag==0){            $(this).wrap('<b />');            tag=1;        }else {            $(this).unwrap('<b />');            tag=0;        }    })

(5) 挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法。确保不影响现有的类。

   $('p').each(function () {       var a=$(this).attr('class');       if(a==0){           $(this).attr('class','inhabitants');       }else{           $(this).attr('class',a+' inhabitants');       }   })