当前位置：网站首页>原生js动态添加元素

原生js动态添加元素

2022-06-25 15:36:00 【全栈程序员站长】

大家好，又见面了，我是你们的朋友全栈君。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js动态添加元素</title>
    <style>
        .phone {
            width: 200px;
            height: 30px;
        }
        ul {
            width: 200px;
            border: 1px solid #eee;
            text-align: right;
        }
        ul li{
            list-style: none;
            height: 50px;
            line-height: 50px;
            padding-right: 20px;
            border-right: 2px solid #999;
        }
        ul li:hover {
            color: #f00;
            border-right: 2px solid #f00;
        }
        /* .circle1 {
            width: 492px;
            height: 499px;
            border-radius: 50%;
            background: #f00;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .circle2 {
            width: 260px;
            height: 434px;
            border-radius: 50%;
            background: #fff;
        } */
    </style>
</head>
<body>
    <div class="container">
        <form action="" id="form">

        </form>
        <ul id="parentUI">
            <li>你好</li>
            <li>关于我们</li>
            <li>帮助中心</li>
        </ul>
    </div>
    <script>
        var formId = document.getElementById("form");
            // 创建元素input
        var inputPhone = document.createElement("input");
            // 设置input的属性
            inputPhone.setAttribute("class","phone");
            inputPhone.type = "text";
            inputPhone.value = "请输入手机号码";
            formId.appendChild(inputPhone);

        // js动态添加li
        var ul = document.getElementById("parentUI");
        var li = document.createElement("li");
            li.setAttribute("class","list");
            li.innerHTML = "联系我们";
            ul.appendChild(li);
    </script>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152106.html原文链接：https://javaforall.cn

原网站

版权声明
本文为[全栈程序员站长]所创，转载请带上原文链接，感谢
https://cloud.tencent.com/developer/article/2030185

边栏推荐

猜你喜欢

随机推荐