当前位置：网站首页>Native JS dynamically add elements

Native JS dynamically add elements

2022-06-25 15:51:00 【Full stack programmer webmaster】

Hello everyone , I meet you again , I'm your friend, Quan Jun .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Native js Add elements dynamically </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> Hello </li>
            <li> About us </li>
            <li> Help center </li>
        </ul>
    </div>
    <script>
        var formId = document.getElementById("form");
            //  Create elements input
        var inputPhone = document.createElement("input");
            //  Set up input Properties of 
            inputPhone.setAttribute("class","phone");
            inputPhone.type = "text";
            inputPhone.value = " Please enter your mobile number ";
            formId.appendChild(inputPhone);

        // js Dynamic addition li
        var ul = document.getElementById("parentUI");
        var li = document.createElement("li");
            li.setAttribute("class","list");
            li.innerHTML = " Contact us ";
            ul.appendChild(li);
    </script>
</body>
</html>

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/152106.html Link to the original text ：https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/176/202206251534384518.html

当前位置：网站首页>Native JS dynamically add elements

Native JS dynamically add elements

边栏推荐

猜你喜欢

随机推荐