Home > Article > Web Front-end > Detailed explanation of using jQuery copy node

Detailed explanation of using jQuery copy node

php中世界最好的语言Original: 2018-04-23 15:52:532327browse

This time I will bring you a detailed explanation of jQuery copy node usage, what are the precautions when using jQuery copy node, the following is a practical case, let’s take a look.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title=&#39;苹果&#39;>苹果</li>
  <li title=&#39;橘子&#39;>橘子</li>
  <li title=&#39;菠萝&#39;>菠萝</li>
</ul>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone(true).appendTo("ul"); // 注意参数true
    //可以复制自己，并且他的副本也有同样功能。
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title=&#39;苹果&#39;>苹果</li>
  <li title=&#39;橘子&#39;>橘子</li>
  <li title=&#39;菠萝&#39;>菠萝</li>
</ul>
</body>
</html>

The rendering is as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Detailed explanation of using jQuery copy node

Related articles