JS中在無內容的父元素中每次在這之前插入元素
阿新 • • 發佈：2019-01-12
方法：父元素.insertBefore(a,b)；
//在父元素中把子元素a插入到子元素b前面
當b = null；時
父元素.insertBefore(a,null)；<==>父元素.appendChild(a);
即在父元素中插入子元素a。
解決原理：父元素.insertBefore（a，父元素.children[0]）; // 在父元素的第一個子元素的前面插入a元素
var Body = document.getElementsByTagName("body"); var oUl = document.createElement("ul"); var Li = document.createElement("li"); Li.innerHTML = "Hello world"; oUl.insertBefore(Li,oUl.children[0]); Body.appendChild("oUl");
簡單的發表評論的小案例
<style> div,ul,button,h2,textarea{ margin:0; padding:0; } h2{ text-align: center; } div{ width: 500px; height:200px; border:1px solid #111; margin:100px auto; padding:20px; overflow:hidden; } textarea{ width:400px; height:100px; outline:none; resize:none; } button{ vertical-align: bottom; } ul{ width:400px; } ul li { position:relative; list-style: none; border-bottom:1px dashed #aaa; } ul li .btn{ font-size:10px; color:blue; position:absolute; right:0; bottom:0; } </style> <script src="jquery-1.12.4.js"></script> </head> <body> <div> <h2>微博</h2> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">釋出</button> <ul></ul> </div> </body> <script> /* $(function(){ $("#btn").click(function(){ // 判斷內容值不為空 trim是刪除前後空格 if($("#txt").val().trim().length === 0){ return alert("輸入的內容不能為空"); } //建立li元素 var $li = $("<li></li>"); $li.text($("#txt").val()); //建立刪除按鈕 $li.append('<button class="btn">刪除</button>'); $("ul").prepend($li); //清空內容 $("#txt").val(''); //刪除釋出內容 $(".btn").click(function(){ $li.remove(); }); }); }); */ var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); //console.log(btn); var oUl = document.getElementsByTagName("ul")[0]; btn.onclick = function(){ //console.log(txt.value.length); if(txt.value.trim().length === 0){ return alert("輸入的內容不能為空"); } var Li = document.createElement("li"); Li.innerHTML = txt.value; var rem = document.createElement("button"); rem.value = "刪除"; rem.innerHTML = "刪除"; rem.className = "btn"; Li.appendChild(rem); oUl.insertBefore(Li,oUl.children[0]); //console.log(li.innerHTML); //oUl.appendChild(Li); rem.onclick = function (){ return Li.remove(); } txt.value = ""; } </script>