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对象
2、appendTo方法
将匹配的元素插入到目标元素内部的最后面(同append)
  与append区别:
    使用时目标元素与插入内容的位置 颠倒
    创建新元素返回的jQuery对象与
    选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动到目标元素内)!
    参数(表示要插入元素的目标位置):
  Selector或者jQuery对象或者html元素对象/html元素对象数组

猜你喜欢

转载自www.cnblogs.com/hnhycnlc888/p/9202625.html