javascript动态添加元素

javascript动态添加元素<!doctypehtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”Generator”content=”EditPlus®”><metaname=”Author”content=””><metaname=”Keywords”content=””><metaname=”Description”co…

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

<!doctype html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8″>
  <meta name=”Generator” content=”EditPlus®”>
  <meta name=”Author” content=””>
  <meta name=”Keywords” content=””>
  <meta name=”Description” content=””>
  <title>Document</title>
 </head>
 <body>
  <script>
      function addLiElement() {

        var liElement = document.createElement(‘li’);
        //liElement.innerHTML = ‘这是新增的li元素’;
        var labelElement = document.createElement(‘label’);
        var inputElement = document.createElement(‘input’);
        labelElement.innerHTML = ‘单号:’
        inputElement.setAttribute(‘name’, ‘expressNumber’);
        liElement.appendChild(labelElement);
        liElement.appendChild(inputElement);
        var ulElement = document.getElementById(‘myid’);
        ulElement.appendChild(liElement);
    }
  </script>
  <ul id=”myid”>
    <li>aa</li>
    <li>bb</li>
  </ul>
  <p>
    <button onClick=”addLiElement();”>动态添加标签</button>
  </p>
 </body>
</html>

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/152117.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 汇编指令B与BL_AB500编程中B指令使用

    汇编指令B与BL_AB500编程中B指令使用1.b与bl指令的作用是什么?   b与bl指令的作用:实现程序跳转,也就是调用子程序。2.b与bl指令的区别是什么?   b与bl指令的区别:b指令:简单的程序跳转,跳转到到目标标号处执行。                                 bl指令:带链接程序跳转,也就是要带返回地址。在发生跳转前,将当前PC-4保存到R14中。             …

    2022年10月21日
    2
  • mysql econnreset_MySQL在node.js服务器上的空闲时间后给出“ read ECONNRESET”错误「建议收藏」

    mysql econnreset_MySQL在node.js服务器上的空闲时间后给出“ read ECONNRESET”错误「建议收藏」我正在运行通过node-mysql模块连接到MySQL的Node服务器。连接和查询MySQL最初运行良好,没有任何错误,但是,将Node服务器闲置几个小时后的第一个查询会导致错误。错误是熟悉的readECONNRESET,来自node-mysql模块的内部。堆栈跟踪(请注意,跟踪的三个条目属于我的应用程序的错误报告代码):Erroratexports.Error.utils.createClas…

    2022年6月17日
    32
  • 运维面试题整理

    运维面试题整理文章目录原题前言1.Nginx反向代理配置,此类urlwww.abc.com/refuse,禁止访问,返回4032.如何使用iptables将本地80端口的请求转发到8080端口,当前主机IP为192.168.16.1,其中本地网卡eth0:3.如何查看Linux系统当前的状态,cpu内存的使用情况及负载4.nginx如何重定义或者添加发往后端服务器的请求头5.编写shell脚本,将当前目录下大于10K的文件转移到/tmp目录下6.写出你所了解的门户网站的服务架构,可用什么方式实现的高可用、负

    2022年6月11日
    28
  • 漫画自动下载工具。

    漫画自动下载工具。

    2021年9月17日
    47
  • python精彩编程200例 pdf-Python程序设计 第3版pdf「建议收藏」

    Python程序设计第3版内容简介《Python程序设计第3版》是面向大学计算机科学专业的教材。本书以Python语言为工具,采用相当传统的方法,强调解决问题、设计和编程是计算机科学的核心技能。全书共13章,此外,还包含两个附录。第1章到第5章介绍计算机与程序、编写简单程序、数字计算、对象和图形、字符串处理等基础知识。第6章到第8章介绍函数、判断结构、循环结构和布尔值等话题。第9章到第1…

    2022年4月6日
    116
  • recvfrom设置超时

    recvfrom设置超时structtimevaltv;intret;tv.tv_sec=10;tv.tv_usec=0;if(setsockopt(s,SOL_SOCKET,SO_RCVTIMEO,&tv,sizeof(tv))<0){ printf("socketoptionSO_RCVTIMEOnotsupport\n"); return;}if((ret

    2022年7月23日
    15

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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