原生js动态添加元素

原生js动态添加元素<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title>原生js动态添加元素</title><style>.phone{.

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

<!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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152106.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 笛卡尔坐标系,它结合了_笛卡尔坐标系的故事

    笛卡尔坐标系,它结合了_笛卡尔坐标系的故事第一节:1D数学1.基本数学概念自然数:人类在大自然中对自己的羊或者牛进行计数,而出现自然数,所以从0到N的整数被称为自然数。负数:有时候人类在交易物品的时候会先赊着,此时就是用负数表示。分数

  • 杂谈:写博客的感想「建议收藏」

    杂谈:写博客的感想「建议收藏」文章目录为什么想写博客写博客的用途尝试理查德弗曼学习法总结为什么想写博客最近刚看完JAVAWEB的一些视频和书籍,一直在琢磨学习路线这件事,期间也看过了很多自学路线的视频和博文。大多数博主,UP主都有一个推荐,就是写博客,所以就想自己写一些学习笔记的博客内容,请各位大佬指正以后有什么写错的地方忘大佬们多多指正,也希望得到一些大佬的鼓励给我提供一些动力。目前先在网上写的平台写一些博客,等之后学…

  • 字符串正则匹配leetcode_JAVA 正则表达式

    字符串正则匹配leetcode_JAVA 正则表达式原题链接给你一个字符串 s 和一个字符规律 p,请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。‘.’ 匹配任意单个字符‘*’ 匹配零个或多个前面的那一个元素所谓匹配,是要涵盖 整个 字符串 s的,而不是部分字符串。示例 1:输入:s = “aa” p = “a”输出:false解释:”a” 无法匹配 “aa” 整个字符串。示例 2:输入:s = “aa” p = “a*”输出:true解释:因为 ‘*’ 代表可以匹配零个或多个前面的那一个元素, 在这里前面的元素就是

  • W3C标准与规范「建议收藏」

    W3C标准与规范「建议收藏」W3C标准,即一系列标准的集合,他的本质是结构标准语言。就像平时使用的HTML、CSS等都需要遵守这些标准。万维网联盟创建于1994年,是web技术领域最具权威和影响力的国际中立性技术标准机构。它有效促进了web技术相互之间的兼容。就像网页是由三部分组成:结构、表现和行为。那么他对应的标准也分三方面:1.结构化标准语言:HTML。可扩展标记语言(XML):最初设计目的是弥补HTML的不

  • CAS单点登录-简介(一)「建议收藏」

    CAS单点登录-简介(一)「建议收藏」CAS单点登录-简介(一)CAS-5.1.3什么是CAS?什么是单点登录?带大家一起搭建sso、cas-management、springbootadmin、springcloudconfig

  • 数据库索引的作用和长处缺点

    数据库索引的作用和长处缺点

    2021年11月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号