jQuery(四)_设置DOM

jQuery(四)_设置DOM

• 创建元素

  向body中添加元素

  var box = document.createElement("div");
  $("body").append(box);
  $("body").append("<div></div>");
  

  $("<div></div>").appendTo("body").css({
      width: 50,
      height: 50,
      backgroundColor: "red"
  });
  

  在div后插入元素

  $("div").after("<div>1</div>");
  $("<div>1</div>").insertAfter("div");
  

  在div前插入元素

  $("div").before("<div>1</div>");
  $("<div>1</div>").insertBefore("div");
  

• 给元素加外容器

  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  

  $("span").wrap("<a href='#'></a>");
  

• 移除一层指定元素包裹的内容

  $("span").unwrap();
  

• 将所有的span放在一个div中

  $("span").wrapAll("<div></div>");
  

• 给元素里面的内容做包裹

  $("span").wrapInner("<a href='#'></a>");
  

• 复制元素(深复制)

  $("<div></div>").css({
      width: 50,
      height: 50,
      backgroundColor: "red"
  }).appendTo("body").on("click", function () {
      // clone(true) true是复制事件，false是不复制事件
      $(this).clone(true).appendTo("body");
  })
  

• 删除元素

  var div = $("<div>111</div>").css({
      width: 50,
      height: 50,
      backgroundColor: "red"
  }).appendTo("body").on("click", function () {
      // $(this).remove();//不保留事件
      setTimeout(function () {
          div.appendTo("body");
      }, 1000)
      // $(this).detach();//保留事件
      $(this).empty();//清除内容，包括子元素
  });
  

• 替换元素

  将所有的span替换成div

  $("span").replaceWidth("<div></div>");
  $("span").replaceWidth(function(index, item){
      return "<div>" + item + "</div>";
  })
  

  $("<div></div>").replaceAll("span");