元素的创建

替换div里的内容

$("#btn").click(function () {
  //通过innerHTML的方式创建元素---以字符串的方式
  $("#dv").html("<input type='button' value='按钮'>");
});

追加到div里面

$("#btn").click(function () {
  $("<input type='button' value='按钮'>").appendTo($("#dv"));
});

追加到div内的最前面

//点击按钮,创建元素
$("#btn").click(function () {
  //把创建的span标签这个子元素直接插入到div中第一个子元素的前面
  $("#dv").prepend($("<span>this is span</span>"));
});

  //主动的方式,与上者相同
  $("<span>this is span</span>").prependTo($("#dv"));

追加到div同级的后面

$("#btn").click(function () {
  //把元素添加到div的后面的位置,是div的下一个兄弟元素了
  $("#dv").after($("<span>this is span</span>"));
});

追加到div同级的前面

$("#btn").click(function () {
  //把元素添加到div的前面的位置,是div的上一个兄弟元素了
  $("#dv").before($("<span>this is span</span>"));
});

元素的移除

移除div所有的子元素

$("#btn").click(function () {
  //从父级元素中移除子级元素---移除所有的子元素
  $("#dv").html("");
});

函数清空所有div子元素

$("#btn").click(function () {
  //清空父元素中的子元素
  $("#dv").empty(); //清空
});

干掉div以及内部所有元素

//点击按钮
$("#btn").click(function () {
  //想要干掉谁,直接找到这个元素,调用这个方法就可以了
  $("#dv").remove(); //自杀---
});