html:
<input type="text"><button>发表</button>
<ul></ul>
javascript:
<script>
/*
点击发表将输入框的内容添加到ul的第一个子节点
*/
// 获取元素 inp btn ul
var inp = document.querySelector('input');
var ul =document.querySelector('ul');
var btn =document.querySelector('button');
console.log(inp, ul, btn);
// 点击button
btn.onclick = function () {
// 输入框的内容
var txt = inp.value;
console.log(txt);
// 第一个子节点 创建子节点
var li = document.createElement('li');
li.innerHTML = txt;
console.log(li);
// 获取ul的所有的子节点
console.log(ul.children);
// 判断是否有子节点
if(ul.children.length == 0){
// 追加
ul.appendChild(li);
} else {
// 添加到第一个
ul.insertBefore(li, ul.children[0]);
}
// 清除输入框的内容
inp.value = '';
};
</script>
效果: