Home  >  Article  >  Web Front-end  >  The clone method in JQuery copies nodes_jquery

The clone method in JQuery copies nodes_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:411405browse

The example in this article describes the clone method in JQuery to copy nodes. Share it with everyone for your reference. The details are as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>复制节点</title>
<style type="text/css">
#main{
width:300px;
margin:200px auto;
background-color:gold;
padding:10px;
}
</style>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function () {
  var $text = $("#txt1");
  $text.click(function () { alert('我是文本框单击事件'); });
  $("#btn1").click(function () {
  $("#btn1").after($text.clone()); //浅克隆(不复制事件)
  });
  $("#btn2").click(function () {
  $("#btn2").after($text.clone(true)); //深克隆(复制事件)
  });
 });
</script>
</head>
<body>
 <div id="main">
 <input type="text" value="我是文本框" id="txt1" />
 <input type="button" id="btn1" value="进行浅克隆(不复制事件)" />
 <input type="button" id="btn2" value="进行深克隆(复制事件)" />
 </div>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn