<ul>
<li>我是li</li>
</ul>
<script>
// 动态创建节点和增加节点的三步曲（经典使用微博发布案例列 文本areaText留言等）
// 1.创建节点 2.为节点赋值 3.把创建的节点插入到相应的父元素里
// 1.创建节点 使用document.crateElement('被创建的节点元素名') 元素节点名数字符串
let li = document.createElement('li')
// 2.为被创建的元素节点赋值（此操作可由字符串拼接完成）,语法:被创建元素节点.innerText
和被创建元素节点.innerHtml
li.innerHTML = ' 我是被创建的li'
// 3.把创建的节点插入到相应的父元素里
// 语法：方法一 父元素.appendChild(被创建的元素节点) 追加
此操作类似CSS中的after伪元素
let ul = document.querySelector('ul')
ul.appendChild(li)
// 方法二 父元素.insertBefore(被创建的元素节点，被插入在父元素里的第几个兄弟元素之前)
此操作类似于CSS的before伪元素
let lis = document.createElement('li')
lis.innerText = '我也是被创建的li'
ul.insertBefore(lis, ul.children[0])
</script>
</body>
