當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

js 添加内容实现列表功能

發(fā)布時間：2023/11/27 生活经验 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 添加内容实现列表功能小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

js 添加使用的是appendChild(node) - 插入新的子節(jié)點（元素）來實現(xiàn)

當(dāng)然也可以刪除使用appendChild(node) - 插入新的子節(jié)點（元素）

效果圖

代碼如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p id="title">今天心情不怎么好</p><button onclick="add_btn()">插入字段</button><button onclick="del_btn()">刪除字段</button></body><script>var va = document.getElementById("title").innerHTMLfunction add_btn() {var add = document.createElement("p")add.textContent = vadocument.getElementById("title").appendChild(add);}function del_btn() {var list = document.getElementById("title")list.removeChild(list.childNodes[0])}</script>
</html>

實現(xiàn)的列表

效果圖

代碼如下

<!DOCTYPE html>
<html>
<body><h1>JavaScript 循環(huán)</h1><p id="demo">我是標(biāo)題</p><script>var val = document.getElementById("demo").innerHTML //獲取P標(biāo)簽的值
console.log(val)
for (var i = 0; i < 10; i++) {var con = document.createElement("p")con.textContent =valdocument.getElementById('demo').appendChild(con)
}</script>
</body>
</html>

需要注意的是:createElement("p") 后面跟著的標(biāo)簽,如果使用的標(biāo)簽是div 那么就寫成createElement("div")

總結(jié)

以上是生活随笔為你收集整理的js 添加内容实现列表功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。