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

一、创建新元素
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区别:
  同上!
  参数(表示要插入元素的目标位置):
  同上!

时间: 2024-10-06 19:15:57

jquery-创建元素和添加子元素的相关文章

bobo jquery获取当前元素下的子元素的子元素

<div class="Bg01"><ul><li class="Bold">黑域名告警</li><li>总数:<span class="Mycolor">24条</span></li><li>未处理:<span class="Myred">03条</span></li></ul

jquery怎样获取一个元素下面相同子元素的个数

例如下面的html代码,要获取P元素下面a元素的个数: <p id="father"> <a></a> <a></a> <a></a> <a></a> <a></a> -- <a></a> </p> 我们可以这样写: $("#father a").length jquery怎样获取一个元素下面相同子元

创建一个新的子元素视图并持有指向数据的游标cursor

android.widget.BaseExpandableListAdapterandroid.widget.CursorTreeAdapterandroid.widget.ResourceCursorTreeAdapter 直接子类SimpleCursorTreeAdapter 类概述一个简单的可扩展的ExpandableListAdapter,通过在XML文件来创建views.你可以指定一个定义了views外观的XML文件. 构造函数public ResourceCursorTreeAdap

指定的元素已经是另一个元素的逻辑子元素。请先将其断开连接。(解决问题总结)

起因: <Window x:Class="WpfApplication1.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window3" Height="300" Width=

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

子元素绝对定位,父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的    可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

CSS-父元素宽度自适应子元素宽度之和

最近碰见这样一个需求,要让图片横向排列设置x方向的滚动条滚动查看,原本当直接创建一个IFC(inline,float什么的)就解决了,搞了半天发现搞不定(IFC也是不能父元素宽度自适应子元素宽度之和的,因为会换行..),最后用flex解决了(然后又发现使用table也是可以的),然后学了两个新名词GFC和FFC..这里就说一下我的解决方法,给大家抛个砖. flex <style> /*1. 最外层容器 width: 200px; overflow-x: scroll; */ .img-view

CSS父元素高度随子元素高度变化而变化

<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局,让父元素高度变0px */ &l

jQuery中获取特定顺序子元素(子元素种类不定)的方法

提出问题:只已知父元素和父元素中子元素的次序,怎么通过jQuery方法获得该元素? 1 <p>第一部分:</p> 2 <ul> 3 <li>1</li> 4 <li>2</li> // 选择这个子元素 5 <li>3</li> 6 </ul> 7 <p>第二部分:</p> 8 <ul> 9 <li>4</li> 10 <l