案例一：在末尾添加节点

作者: 十六只猴子王 | 来源:发表于2019-04-09 21:28 被阅读0次

屏幕快照 2019-04-09 下午9.11.23.png

第一步：获取到ul标签
第二步：创建li标签
document.createElement("标签名称");
第三部：创建文本
document.creatTextNode("文本内容");
第四部：把文本添加到li下面
第五步：把li添加到ul末尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="ulid">
        <li>111</li>
        <li>222/li>
        <li>333</li>
        <li>444</li>
    </ul>
<br/>
    <input type="button" value="add" onclick="add1()"/>
<script type="text/javascript">
    function add1() {
        //获取ul标签
        var ul1 = document.getElementById("ulid");
        //创建li标签
        var li1 = document.createElement("li");
        //创建文本
        var text1 = document.createTextNode("555");
        //把文本加入到li下面
        li1.appendChild(text1);
        //把li加入到ul下面
        ul1.appendChild(li1);
    }
</script>
</body>
</html>