动态创建节点并且给创建的元素添加属性

最新推荐文章于 2022-10-27 14:48:12 发布

原创最新推荐文章于 2022-10-27 14:48:12 发布 · 4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #html5

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用JavaScript进行动态DOM操作的例子，包括创建、添加和移除元素，以及响应用户交互。通过一个简单的登录界面生成过程，展示了如何利用JavaScript控制网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    window.onload=function(){
        var btn=document.createElement('button');//创建一个button标签
        document.body.appendChild(btn);
        btn.innerHTML="点击";
        btn.setAttribute("id","btn1");//给button添加一个id的属性
        var btn1=document.getElementById("btn1");//获取id
        btn1.onclick=function(){//给这个id添加一个点击事件
            btn.style.display="none";//点击后隐藏这个按钮
            var div=document.createElement("div");//创建一个div
            div.setAttribute("class","div");//给这个div一个class 的值并且命名为div
            div.innerHTML="用户名";//将用户名放入在前面创建的div里面
            div.style.cssText="width:50px;color:#000";//设置这个div的宽和字体颜色
            document.body.appendChild(div);//将这个div放在body里面
            var input1=document.createElement("input");//创建一个input标签
            input1.setAttribute("type","text");//给这个input标签添加一个type的属性和type的值text
            document.body.appendChild(input1);//放在body里面（排序方式一次往后面排）
            var br=document.createElement("br");//创建一个br标签
            document.body.appendChild(br);//放在body里面（排序方式一次往后面排）
            var btn1=document.createElement("input");//创建一个input标签
            btn1.setAttribute("type","button");//给这个input标签添加一个type的属性和type的值button
            btn1.setAttribute("value","登录");//给这个input标签添加一个value和value的值登录
            document.body.appendChild(btn1)//将btn1添加到body里面
        }
    }
</script>