方法一 创建节点，追加
<body>
<input type="text" placeholder="请输入信息">
<button class="one">添加</button>
<button>删除</button>
<ul></ul>
</body>
</html>
<script>
let oBtn = document.querySelectorAll('button')
let oBinput = document.body.firstElementChild
let oUl = oBtn[1].nextElementSibling
oBtn[0].onclick = function () {
// 给父元素追加li
if (oBinput.value != '') { //判断文本不为空时追加
let oLi = document.createElement('li')
oLi.innerHTML = oBinput.value
oUl.appendChild(oLi)
oBinput.value = ''
}
}
</script>
方法二 拼接字符串
<script>
let oBtn = document.querySelectorAll('button')
let oBinput = document.body.firstElementChild
let oUl = oBtn[1].nextElementSibling
let str = ''
oBtn[0].onclick = function () {
str += ` <li>${oBinput.value}</li>
`
oBinput.value = ''
oUl.innerHTML = str
}
</script>
方法三 利用insertBefore
功能:按照指定位置添加子元素,将目标元素添加至参照元素之前
用法：父元素.insertBefore(目标元素,参照元素)
//body内容同上
<script>
let oBtn = document.querySelectorAll('button')
let oBinput = document.body.firstElementChild
let oUl = oBtn[1].nextElementSibling
oBtn[0].onclick = function () {
if (oBinput.value != '') {
let oLi = document.createElement('li')
oLi.innerHTML = oBinput.value //赋值
oUl.insertBefore(oLi, oUl.lastElementChild)
oBinput.value = ''
}
}
</script>
