jquery-创建元素和添加子元素

Posted 2020-08-14 舒山

一、创建新元素
1、使用$函数创建新元素
　　var $newElement=$(‘<div><p>段落</p></div>‘);//创建元素,返回jQuery对象
　　说明：
　　1）创建的新元素不会自动的把新元素插入到页面中，我们还需要明确的指定其插入到页面中的位置（比如使用append方法，指定
　　其插入位置为某个元素的最后一个子元素）
　　2）返回的jQuery对象中只包含html片段最顶层（外层）的元素，对于后代元素我们可以像处理页面中已有元素一样，使用
　　children或find方法访问 也就是说alert($newElement);的结果应为1
　　3）既然可以直接apend等方法插入html元素为何还要有这个创建新元素的功能？
　　使用$函数创建元素，是返回的是jQuery对象，我们可以使用jQuery对象里面的方法在创建的这个元素被插入到页面之前进行
　　各种操作比如进行绑定事件处理函数！
2、克隆已有的元素（通过克隆已有元素生成新元素）
　　使用clone方法以已有的元素(或者新创建的元素)为模子生成新元素
　　clone方法会复制jQuery对象内包含后代元素在内的所有元素
　　参数：
　　两个参数都是可选
　　第一个参数：
　　一个布尔值（true 或者 false）指示目标元素的事件处理函数以及关联数据是否会被复制
　　第二个参数（默认情况下与第一个参数一致）：
　　一个布尔值，指示是否对克隆的元素的所有子元素的事件处理程序以及关联数据进行复制
二、添加子元素
1、append方法
　　在每个匹配元素内的 末尾处 插入参数内容
　　参数类型说明：
　　　　1）普通字符串(可包含各种html标签)
　　　　$(‘body‘).append(‘html字符串‘);
　　　　2）jQuery对象
　　　　①使用$函数创建的新元素(jQuery对象)
　　　　②使用$函数获取页面中已经有的元素(jQuery对象)
　　　　此时会将已有的元素移动到目标元素内，就是被剪切了

 1 <script type="text/javascript">    
 2     $(function(){
 3             $getParagraph=$("p");//运行后p段落会变成div的子元素
 4             $("#oo").append($getParagraph);
 5         }
 6     );
 7 </script>
 8 
 9 <p>段落</p>
10 <div id="oo">div</div>

　　　　③使用clone方法克隆页面中已经有的元素(jQuery对象)

　$getParagraph=$("p").clone();//这样就避免了p段落会变成div的子元素

　　　　3）html元素对象、html元素对象数组

　　　　====以上类型的参数可传入多个，每个参数都会被插入到匹配元素！===
　　　　4）函数
　　　　有多少个匹配元素，这个函数就会执行多少次！
　　　　函数可以接受到两个参数：第一个是当前元素的序号、第二个是当前元素内的html
　　　　函数内部this代表当前的html元素对象
　　　　return 的数据就是插入的内容（可以为html元素，也可以是jQuery对象）
2、prepend方法
　　将参数内容插入到每个匹配元素内部的 最前面
　　使用方法及参数与append相同

3、appendTo方法
　　将匹配的元素插入到目标元素内部的最后面(同append)
　　与append区别：
　　　　使用时目标元素与插入内容的位置 颠倒
　　　　创建新元素返回的jQuery对象与
　　　　选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动到目标元素内)！
　　　　参数(表示要插入元素的目标位置)：
　　Selector或者jQuery对象或者html元素对象/html元素对象数组
4、prependTo方法
　　将匹配的元素插入到目标元素内部的最前面(同prepend)
　　与prepend区别：
　　同上！
　　参数(表示要插入元素的目标位置)：
　　同上！