jquary 克隆节点和替换节点

最新推荐文章于 2023-06-16 20:53:39 发布

原创最新推荐文章于 2023-06-16 20:53:39 发布 · 737 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #function #xhtml #html #文档

jquary 专栏收录该内容

38 篇文章

订阅专栏

本文将通过实例演示如何使用JavaScript操作DOM元素，包括克隆节点、替换节点等基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"></style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
   var $btn=$("button");//首先选出按钮
   $btn.click(function(){//给按钮加一个时间，并绑定一个函数
       //$("li:eq(0)").clone().prependTo("ul");------在ul前面克隆第一个li
       //$("li:eq(0)").clone().appendTo("ul");//------在ul前面克隆第一个li
       //$btn.clone().appendTo("body")//---------在body里克隆一个按钮
       //$btn.clone(true).appendTo("body")//-----在body里面克隆按钮，并且克隆的按钮也能克隆按钮

       //替换节点
       //$("li:eq(0)").replaceWith("<button>li换成按钮</button>");//--------把第一个li换成按钮
       $("<button>登陆</button>").replaceAll("li");//-----------把所有的li换成按钮

                   })
       })

</script>
</head>

<body>
    <button>克隆节点</button>


    <ul>
      <li>11</li>
      <li>22</li>
      <li>11</li>
      <li>11</li>
    </ul>
</body>
</html>