jQuery参考实例 1.10 创建、编辑并插入DOM元素

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.10 Creating, Operating on, and Inserting DOM Elements

需求

创建一个或多个DOM元素,随即对它进行编辑,并最终插入到DOM树中。

解决方案

jQuery函数会根据传入参数类型的不同而执行不同的操作,因此,可以说jQuery函数是多功能的。如果传入参数是一个HTML片段的字符串,那么jQuery函数会实时创建出相应的DOM对象。比如,下面的语句会创建一个内含<a>元素的<p>元素:

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

创建好元素后,可以用jQuery方法对该元素进行操作,就好像该元素是从已有的HTML文档中选择出来的一样。比如,可以用find()方法选中<a>元素,然后设定其属性。在下面的代码中,我们设定<a>元素的href属性值为http://www.jquery.com

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

不错吧?在实时创建DOM元素并对其进行编辑后,还可以通过jQuery提供的操作方法来改变当前加载的DOM树。下面的例子中,我们在创建并编辑元素之后,用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树中的是一开始用jQuery函数选择的<p>元素集。

讨论

在上面的几个例子中,jQuery函数接受HTML片段字符串来实时创建DOM元素。除了这种方法,jQuery函数还可以接受通过createElement()创建出来的原生DOM对象:

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

当然,与之前的方法相比,在直接传入HTML片段字符串可以满足需求的情况下,使用原生DOM对象显得比较麻烦。

值得一提的是,对于改变当前加载的DOM树,appendTo()方法仅仅只是冰山一角。除此之外,下列方法均可用于改变DOM树:

  • append()
  • prepend()
  • prependTo()
  • after()
  • before()
  • insertAfter()
  • insertBefore()
  • wrap()
  • wrapAll()
  • wrapInner()

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!