js 添加内容实现列表功能
生活随笔
收集整理的這篇文章主要介紹了
js 添加内容实现列表功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js 添加 使用的是appendChild(node) - 插入新的子節點（元素） 來實現
當然也可以刪除 使用appendChild(node) - 插入新的子節點（元素）
效果圖
代碼如下
<!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>實現的列表
效果圖
代碼如下
<!DOCTYPE html>
<html>
<body><h1>JavaScript 循環</h1><p id="demo">我是標題</p><script>var val = document.getElementById("demo").innerHTML //獲取P標簽的值
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") 后面跟著的標簽,如果使用的標簽是div 那么就寫成createElement("div")
總結
以上是生活随笔為你收集整理的js 添加内容实现列表功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： A股入摩是什么意思？
- 下一篇： 微信小程序页面之间数据传递