方法:父元素.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>