元素拼接

点击按钮动态拼接元素

function appendLi(i) {
  //创建li元素
  let li = $(`<li>拼接li${i}</li>`);
  let ul = $("#list");
  //ul.append(li)
  li.appendTo(ul);
}

function prependLi(i) {
  let li = $(`<li>拼接li${i}</li>`);
  let ul = $("#list");
  //ul.prepend(li)
  li.prependTo(ul);
}

function afterLi(v) {
  //找第一个
  let firstLi = $("#list>li:first");
  console.log(firstLi);
  if (firstLi) {
    //再把li放在第一个后面
    let li = $(`<li>拼接li${v}</li>`);
    //firstLi.after(li)
    //li.insertAfter(firstLi)
  }
}

function beforeLi(v) {
  //找第二个
  let thirdLi = $("#list>li:eq(1)");
  console.log(thirdLi);
  if (thirdLi) {
    //再把li放在第二个前面
    let li = $(`<li>拼接li${v}</li>`);
    //thirdLi.before(li)
    li.insertBefore(thirdLi);
  }
}

$(function () {
  let i = 0;
  let btn = $(".btn");
  let btn1 = $(".btn1");
  let btn2 = $(".btn2");
  btn.click(function () {
    i++;
    appendLi(i);
  });
  btn1.click(function () {
    i++;
    prependLi(i);
  });
  btn2.click(function () {
    i++;
    beforeLi("hello" + i);
  });
});