1.創建節點輸出內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="" id="" value="" />
<input type="button" name="" id="" value="新建" />
<ul>
</ul>
</body>
<script type="text/javascript">
//新建一個文本
(function(){
var btn=document.querySelectorAll('input')[1];
//console.log(btn);
var text=document.querySelectorAll('input')[0];
var oUl=document.querySelector('ul');
btn.οnclick=function(){
//createElement創建//創建一個li變量名爲oli;
var oLi=document.createElement('li');
//獲取到父級下的所有子級元素;
var aLi=oUl.getElementsByTagName('li');
//
oLi.innerHTML=text.value;
//aLi是個數組,它的長度大於0,後輸入的才能放到上面;
if(aLi.length>0){
//如果想要後輸入的顯示在最上面,就用insertBefore(插入的元素,要插入的位置)
oUl.insertBefore(oLi,aLi[0]);
}else{
//父級.appendChild.子級//創建的li給ul;
//插入的元素li
oUl.appendChild(oLi);
}
}
})();
</script>
</html>
2.插入元素
insertBefore(節點、原有節點在已有元素前插入)
3.刪除DOM
removeChild(節點,刪除一個節點)