本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.12节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.12.1 问题你需要用新的DOM节点代替DOM中的现有节点。
1.12.2 解决方案使用replaceWith()方法,可以选择一组DOM元素进行替换。在下面的代码示例中,使用replaceWith()方法,将class属性为remove的所有元素替换为新的DOM结构:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <ul> <li class='remove'>name</li> <li>name</li> <li class='remove'>name</li> <li class='remove'>name</li> <li>name</li> <li class='remove'>name</li> <li>name</li> <li class='remove'>name</li> </ul> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript"> jQuery('li.remove').replaceWith('<li>removed</li>'); </script> </body> </html>添加到DOM中的新DOM结构作为一个字符串参数传递给relaceWith()方法。在例子中,所有元素(包括子元素)都被新的结构remove替代。
1.12.3 讨论jQuery提供一个方向相反的方法replaceAll(),该方法的功能与relaceWith()方法相同,但是参数位置颠倒。例如,可以将本秘诀中的代码改写成:
jQuery('<li>removed</li>').replaceAll('li.remove');这里将HTML字符串传递给jQuery函数,然后使用replaceAll()方法选择想要删除和替换的DOM节点及其子节点。
相关资源:敏捷开发V1.0.pptx