黑马程序员技术交流社区

标题: 【上海校区】jQuery元素的几种创建与添加 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-6 09:33
标题: 【上海校区】jQuery元素的几种创建与添加
添加元素的几种方法（1）通过.append()

父级元素.append(创建好的子级元素)

• 
  
  //在父级元素div中追加一个子元素
  
  
• 
  
  //父级元素.append(创建好的子级元素)
  
  
• 
  
  $("div").append($("<a href='http://www.baidu.com'>百度</a>"));
  
  
  

（2）通过.appendTo()

创建好的子级元素.appendTo(父级元素)

• 
  
  //创建一个子级元素直接加到父级元素
  
  
• 
  
  //创建好的子级元素.appendTo(父级元素)
  
  
• 
  
  $("<a href='http://www.baidu.com'>百度</a>").appendTo($("div"));
  
  
  

（3）通过.prepend()

父元素.prepend(子元素)

• 
  
  //把元素添加进id="dv"的第一个子元素的前面
  
  
• 
  
  //父元素.prepend(子元素);
  
  
• 
  
  $("#dv").prepend($('<span>this is 01 span</span>'));
  
  
  

（4）通过.prependTo()

子元素.prependTo(父元素)

• 
  
  //把元素添加进id="dv"的第一个子元素的前面
  
  
• 
  
  //子元素.prependTo(父元素);
  
  
• 
  
  $('<span>this is 02 span</span>').prependTo($("#dv"));
  
  
  

（5）通过.after()

添加下一个兄弟元素

$("#dv").after($('<span>this is 03 span</span>'));（6）通过.before()

添加上一个兄弟元素

$("#dv").before($('<span>this is 04 span</span>'));移除元素的几种方法（1）通过.html(" ")

移除所有的元素

• 
  
  //清空div里的所有元素
  
  
• 
  
  $("#dv").html(" ");
  
  
  

（2）通过.empty()

移除所有的元素

• 
  
  //清空div里的所有元素
  
  
• 
  
  $("#dv").empty();
  
  
  

（3）通过.remove()

移除整个元素------->相当于自杀

• 
  
  //想要干掉谁，就让谁调用remove这个方法
  
  
• 
  
  $("#dv").remove();
  
  
  

---

作者: 不二晨    时间: 2018-8-16 17:23
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2