天天看点

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

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

1.10.1 问题

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

1.10.2 解决方案

你可能还不清楚,jquery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行。如果以原始html文本字符串为参数调用函数,它将立刻创建这些元素。例如,下列语句将创建一个包装在

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

元素中的

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

元素,在

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

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

元素中还封装了一个文本节点:

创建了元素之后,还可以使用jquery方法对它进行进一步的操作,就像一开始就从现有的html文档中选择了

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

这很棒,对吗?目前为止,所做的只不过是在运行中创建元素并在代码中进行操纵,实际上还可以做得更好。可以说,实际上还没有真正改变当前加载的dom。想做到这一点,就必须使用jquery提供的操纵方法。下面是在html文档上下文中的代码。在这段代码中将创建元素、在这些元素上进行操作,然后用操纵方法appendto()将它们插入dom中:

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

1.10.3 讨论

在本秘诀中,向jquery函数传递原始html字符串,这一参数被方法用来在运行中创建dom元素。 还可以简单地向jquery函数传递一个由dom方法createelement()创建的dom对象:

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

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

append()

prepend()

prependto()

after()

before()

insertafter()

insertbefore()

wrap()

wrapall()

wrapinner()

继续阅读