jQuery clone()方法一个注意点

begin: 20170702
version: 20170724

用jQuery clone()方法可以赋值一个节点,但是如果这个节点带有id属性,那么可能导致该id在同一个页面中被重复使用。比如我们在head>script:nth-of-type(3)中代码的最后一行复制了#target5元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" 
 href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css">
    <script src="program.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
      $(document).ready(function() {
        $("#target1").css("color", "red");
        $("#target1").prop("disabled", true);
        $("#target4").remove();
        $("#target2").appendTo("#right-well");
        $("#target5").clone().appendTo("#left-well");
      });
    </script>

</head>
<body>
<!-- 请只修改这条注释以上的代码 -->

    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
      <div class="row">
        <div class="col-xs-6">
          <h4>#left-well</h4>
          <div class="well" id="left-well">
            <button class="btn btn-default target" id="target1">#target1</button>
            <button class="btn btn-default target" id="target2">#target2</button>
            <button class="btn btn-default target" id="target3">#target3</button>
          </div>
        </div>
        <div class="col-xs-6">
          <h4>#right-well</h4>
          <div class="well" id="right-well">
            <button class="btn btn-default target" id="target4">#target4</button>
            <button class="btn btn-default target" id="target5">#target5</button>
            <button class="btn btn-default target" id="target6">#target6</button>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

结果发现出现了两个id为target5的元素,这一点需要注意。

使用clone()方法后的部分html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,668评论 0 2
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,849评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,605评论 0 11
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,159评论 24 450
  • 张春晨阅读 1,319评论 1 0