搜索
写文章提问
登录注册
展开

JS示例25-创建元素并添加

专注APP开发发表于移动大前端
49

一、知识要点

1、document.createElement('li') 2、oUl.appendChild(oLi);

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <script>
            window.onload = function() {
                var oAddBtn = document.getElementById('add');
                var oName = document.getElementById('name');

                var oUl = document.getElementById('ul1');
                var id = 0;

                oAddBtn.onclick = function() {
                    var oLi = document.createElement('li');
                    id++;
                    oLi.innerHTML = '<span>' + id + '</span>、<span>' + oName.value + '</span>'

                    oUl.appendChild(oLi);
                }
            }
        </script>
    </head>

    <body>
        <input type="text" name="" id="name" value="Tom" />
        <input type="button" name="" id="add" value="新增" />
        <ul id='ul1'>
            <!--<li><span>1</span>、<span>姓名</span>-->
            </li>
        </ul>
    </body>

</html>

image

表格新增

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>新增</title>
    <script>
        window.onload = function () {
            var oTab = document.getElementById('tab1');

            var oBtn = document.getElementById('btn1');
            var oName = document.getElementById('name'); // 姓名
            var oAge = document.getElementById('age'); // 年龄

            oBtn.onclick = function () {
                var oTr = document.createElement('tr');

                var oTd = document.createElement('td'); // 序号td
                oTd.innerHTML = oTab.tBodies[0].rows.length + 1; // 序号+1
                oTr.appendChild(oTd);

                var oTd = document.createElement('td'); // 姓名td
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td'); // 年龄td
                oTd.innerHTML = oAge.value
                oTr.appendChild(oTd);

                oTab.tBodies[0].appendChild(oTr);
            };
        };
    </script>
</head>

<body>
    姓名：<input id="name" type="text" value="Tom" />
    年龄：<input id="age" type="text" value="28" />
    <input id="btn1" type="button" value="添加" />

    <table id="tab1" border="1" width="500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>27</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>28</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

image

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

发表于
举报

移动大前端

82 篇文章13 人订阅

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券