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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 1.3万亿条数据查询如何做到毫秒级响应?

    1.3万亿条数据查询如何做到毫秒级响应?

    2020年11月14日
    164
  • Android入门教程1【学前准备】

    Android入门教程1【学前准备】Android入门教程学习Android的学前准备    我呢,不像别人,有自己的学习风格,我觉得在0基础的情况下去学一门语言,最重要的是什么,是计划,无目的这看看那看看的只会让你迷茫。废话不多说,直接跟我来学习Android吧。  一:学前准备要准备什么呢?我给大家一一列举一下:1.书籍  为什么要准备书籍呢?网上免费教程不多的是么?是的,网上是有,但有可能你今天看了一集教程就没有然后…

    2022年6月3日
    33
  • qi接收启动协议_基于QI协议的无线充电通信系统「建议收藏」

    qi接收启动协议_基于QI协议的无线充电通信系统「建议收藏」龙源期刊网http://doc.docsou.com基于QI协议的无线充电通信系统作者:胡江浩张中炜来源:《中国新通信》2016年第03期【摘要】无线充电技术的学名又叫做无线电能传输,其原理非常类似于变压器,都是通过发射电路产生一个交变电流通过初级线圈,从而在初级线圈上感应出一个交变电磁场,次级线圈通过接收该交变电磁场从而产生感应电流,通过电磁感应实现能源的传输。该文主要介绍了一种无线充电领域中…

    2022年6月16日
    29
  • LAMP下HTTPS配置「建议收藏」

    LAMP下HTTPS配置「建议收藏」LAMP下HTTPS配置    LAMP下配置HTTPS非常简单,本文主要介绍ubuntu下apache配置https的具体步骤和流程,证书为服务器生成的本地证书,希望对大家有所帮助。证书:本地生成apache版本:Apache/2.4.7(Ubuntu)系统:Ubuntu14.04一、安装Apache$sudoapt-getinstallapache2使用此方式安装的APACHE,配置比…

    2022年6月5日
    28
  • swift中Dictionary的grouping by使用

    swift中Dictionary的grouping by使用今天在写一个功能的时候用到了Dictionary的groupingby这个用法,代码先贴出来importUIKitclassAlignFlowLayout:UICollectionViewFlowLayout{requiredinit(itemSize:CGSize=CGSize.zero,minimumInteritemSpacing:CGFloat=0,minimumLineSpacing:CGFloat=0,sectionInset:

    2022年8月20日
    2
  • eclipse搭建安卓开发环境

    eclipse搭建安卓开发环境总结起来,Android开发环境搭建可以分为以下四步:第一步、安装JDK;第二步、安装Eclipse;第三步、下载并安装AndroidSDK;第四步、为Eclipse安装ADT插件 下面详细介绍。第一步、安装JDKAndroid开发工具要求必须安装JDK(JavaDevelopmentKit),不能只安装JRE(JavaRuntimeEdition),在安装A…

    2022年7月23日
    9

发表回复

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

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