美妙清单

todo清单

html:

     <input type="text" id="inp"> <button onclick="add()">添加</button>
      <div class="container"> </div>

js

function add(){
    var inp = document.getElementById("inp");
    // 获取inp
    var container = document.querySelector(".container");
    // 获取到容器container
    var first = container.firstElementChild;
    // 获取到容器里面的第一个元素
    var p = document.createElement("p");
    //  创建一个p元素
    p.innerHTML = inp.value + '<button onclick="del(this)">x</button>';
    // 设置p的内容
    container.insertBefore(p,first);
    // 把p标签插入到container的第一个元素前面
    inp.value = '';
    // 清空input框里面的值     
}
function del(el){
    var p = el.parentElement;
    // 获取到p元素
    var container = p.parentElement;
    // 获取到container
    container.removeChild(p);
    // container 删除p
    
}