案例 在ul中最后一个li后面添加一个li

案例 在ul中最后一个li后面添加一个li

  • 步骤分析
  • 需要用到的知识点
  • 实现代码

步骤分析

  1. 创建1个li标签
  2. 创建文本
  3. 把创建的文本加入到创建的li标签中
  4. 把创建的li加入到ul中

需要用到的知识点

  1. document.createElement(""):创建标签使用
  2. document.createTextNode(""):创建文本内容使用
  3. appendChild():向元素添加子元素

实现代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<ul id="uid">
    <li>1111111111li>
    <li>222222li>
    <li>3333333li>
    <li>74444444li>
ul>
<input type="button" onclick="addLi()" value="添加">
body>

<script>
    function addLi() {
        var u = document.getElementById("uid");
        //1. 创建1个li标签
        var createLi = document.createElement("li");
        //2. 创建文本
        var text = document.createTextNode("999");
        //3. 把创建的文本加入到创建的li标签中
        createLi.appendChild(text)
        //4. 把创建的li加入到ul中
        u.appendChild(createLi)
    }
script>
html>

你可能感兴趣的:(js)