JavaScript._心得技巧

上一篇: 40-redis集群的搭建下一篇:jquery案例3-模仿京东轮播图

JavaScript.

发布时间：2022-06-28 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了JavaScript.，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

DOM基础:

插入元素(2)（appendChild（）和insertBefore（））

insertBefore（）将一个新的元素插入到父元素中的某一个子元素"之前"。

代码:<!DOCTYPE html>

<html lang="en"><head>    <meta charset="UTF-8">    <title>插入元素</title>    <script>        window.onload = function (){   //insertBefore将一个新元素插入到父元素中的某一个子元素“之前”            let oBtn =document.getElementById("btn");            //为按钮添加点击事件            oBtn.onclick = function (){                let  oUl = document.getElementById("list");                let  oTxt = document.getElementById("txt");                //将文本框的内容转换为"文本节点"                let textNode = document.createTextNode(oTxt.value);                //动态创建一个一个li元素                let oLi = document.createElement("li");                //将文本节点插入li元素中去                oLi.appendChild(textNode);                //将li元素插入ul元素中去                oUl.insertBefore(oLi,oUl.firstChild);            }        }    </script></head><body><ul id="list">    <li>胡桃</li>    <li>刻晴</li>    <li>七七</li></ul><input id="txt" type="text"/><input id="btn" type="button" value="插入"></body></html>运行结果: