《jQuery Cookbook中文版》——1.10　创建、操作和插入DOM元素-CSDN博客

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.10节，作者:【美】jQuery社区专家组译者：姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.10　创建、操作和插入DOM元素

1.10.1　问题
你打算创建一个或者多个新的DOM元素，立刻选中这些元素加以操作，然后把它们注入到DOM中。

1.10.2　解决方案
你可能还不清楚，jQuery函数是多功能的，根据你发送的不同参数结构，一个函数能以不同的方式运行。如果以原始HTML文本字符串为参数调用函数，它将立刻创建这些元素。例如，下列语句将创建一个包装在 screenshot 元素中的元素，在和元素中还封装了一个文本节点：

jQuery('<p><a>jQuery</a></p>');

创建了元素之后，还可以使用jQuery方法对它进行进一步的操作，就像一开始就从现有的HTML文档中选择了 screenshot 元素似的。例如，可以用.find()方法选择元素,并设置它的一个属性。

jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com');

这很棒，对吗？目前为止，所做的只不过是在运行中创建元素并在代码中进行操纵，实际上还可以做得更好。可以说，实际上还没有真正改变当前加载的DOM。想做到这一点，就必须使用jQuery提供的操纵方法。下面是在HTML文档上下文中的代码。在这段代码中将创建元素、在这些元素上进行操作，然后用操纵方法appendTo()将它们插入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>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com')
　.end().appendTo('body');
</script>
</body>
</html>

请注意这里是如何使用end()方法撤消find()方法的，这样当调用appendTo()方法时，它将在DOM中附加包含在初始包装器集中的元素。

1.10.3　讨论
在本秘诀中，向jQuery函数传递原始HTML字符串，这一参数被方法用来在运行中创建DOM元素。还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象：

jQuery(document.createElement('p')).appendTo('body'); //在页面中添加一个空白的p元素

当然，如果用一个包含多个元素的HTML字符串就能正常工作，这么做可能就显得麻烦了，如何选择取决于具体的用法。

值得一提的是，这里只是用appendTo()方法简单地介绍了操纵方法的基础。除了appendTo()方法之外，还有如下操纵方法：

append()
prepend()

prependTo()
after()
before()
insertAfter()
insertBefore()
wrap()
wrapAll()
wrapInner()

《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素

1.10 创建、操作和插入DOM元素

《jQuery Cookbook中文版》——1.10　创建、操作和插入DOM元素

1.10　创建、操作和插入DOM元素