js 新建节点

js 新建节点例子

在我们的开发中，有时候我们需要动态的在页面中插入一些东西，这样我们可以通过js的新建节点来完美的完成这个操作

现在我们来实现一个小例子，类似于在朋友圈或者抖音发表评论，一点评论，输入的内容就会出现在评论列表

先写一个简单的代码

<textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> <ul> <!-- 存放评论的列表--> </ul>

运行出来的是

主要的还是js代码

const btn = document.querySelector('button'); const ul = document.querySelector('ul') const text = document.querySelector('textarea') btn.onclick = function () { if (text.value===''){ alert('请输入内容'); return false }else { //1.创建元素 const lis = document.createElement('li') //1.1将输入内容添加到li中 lis.innerHTML = text.value //1.2添加完清空输入框 text.value = '' //2.添加元素 // ul.appendChild(lis) //从后面添加 ul.insertBefore(lis,ul.children[0]) //从前面添加 } }

这里先获取按钮，输入框和存放评论的列表，监听按钮点击 如果输入内容为空则提示 ‘请输入例如’ ；如果不为空，就先创建一个元素节点（li），再把输入框输入的内容添加到新建的元素节点中（li），添加完清空输入框；最后把元素节点（li）添加到ul中

用node.appendChild(child) 或者appendChild(child,指定元素位置)

node.appendChild(child) 是添加到后面的，类似于数组的push；node是父级 ， child是子级

node.appendChild(child,’指定元素位置‘) 是添加到指定指定位置的node是父级 ， child是子级 后面接的是添加到的位置

如：ul.children[0]是添加到开头，ul.children[ul.children.length] 是添加到结尾

想看看效果的赶紧复制代码去试试吧