原生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)


相关推荐

  • 二级域名

    二级域名

    2021年10月21日
  • python rarfile不支持中文路径_python使用zipfile解压文件中文乱码问题

    python rarfile不支持中文路径_python使用zipfile解压文件中文乱码问题中文在编程中真实后娘养的,各种坑爹,python3下中文乱码这个问题抓破了头皮,头疼。看了alex的文章,才有种恍然大悟的感觉(链接在底部)。一句话,就是转换成unicode,压缩前是什么编码,使用什么编码encode再decode回来先看测试代码:#-*-coding:utf-8-*-importzipfile#默认模式r,读azip=zipfile.ZipFile(“/Users…

    2022年10月22日
  • 简练网软考知识点整理-项目需求跟踪及需求跟踪矩阵[通俗易懂]

    简练网软考知识点整理-项目需求跟踪及需求跟踪矩阵[通俗易懂]需求跟踪矩阵是把产品需求从其来源连接到能满足需求的可交付成果的一种表格。使用需求跟踪矩阵,可以把每个需求与业务目标或项目目标联系起来,有助于确保每个需求都具有商业价值。需求跟踪矩阵提供了在整个项目生命周期中跟踪需求的一种方法,有助于确保需求文件中被批准的每项需求在项目结束的时候都能交付。最后,需求跟踪矩阵还为管理产品范围变更提供了框架。

  • java 整数规划_线性规划与整数规划求解速度对比

    java 整数规划_线性规划与整数规划求解速度对比文章发表于微信公众号【数据魔术师】:线性规划&整数规划求解速度PK线性规划&整数规划求解速度PK​mp.weixin.qq.com相信大家对线性规划和整数规划应该不陌生,在开始今天的问题之前我们不妨再来复习一下这两个概念,毕竟温故而知新嘛线性规划与整数规划线性规划是这样定义的:求解线性规划问题的基本方法是单纯形法,后来又有改进单纯形法、对偶单纯形法等。而整数(线性)规划则是在线性规…

  • c语言中位运算符的用法_c语言中位运算符的优先级

    c语言中位运算符的用法_c语言中位运算符的优先级位 运 算一直对位运算头疼,在此总结一下   程序中的所有数在计算机内存中都是以二进制的形式储存的。位运算说穿了,就是直接对整数在内存中的二进制位进行操作。运位算包括位逻辑运算和移位运算,位逻辑运算能够方便地设置或屏蔽内存中某个字节的一位或几位,也可以对两个数按位相加等;移位运算可以对内存中某个二进制数左移或右移几位等。计算机内部是以补码形式存放数值的。C语言提供了六种位运算位运算符含义…

  • Java XLSTransformer生成excel文件

    Java XLSTransformer生成excel文件把页面的数据导出excel数据 然后进入struts2action packagecomxx.emidas.activity.activity.ajax;importcom.xx.combiz.spring.util.LionConfigUtils;importcom.xx.e

发表回复

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

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