JavaScript 添加一个元素标签[通俗易懂]

JavaScript 添加一个元素标签[通俗易懂]JavaScript添加一个元素标签文章目录JavaScript添加一个元素标签代码效果代码<!DOCTYPEhtml><html><head><metacharset=”UTF-8″><title>test</title></head><body><divid=”div1″><pid=”p1″>这是一个段落。</p&gt

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

JavaScript 添加一个元素标签

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
    <button onclick="creatEle()">
        添加元素
    </button>
</div>

<script> function creatEle() { 
      // 创建标签 var para = document.createElement("p"); // 添加 id 名 panel1 para.id = "id1" // panel1.setAttribute("id","panel1"); // 添加类名 para.classList.add("class1"); para.classList.add("class2"); // 创建div的css样式 para.style.cssText="width:200px;height:200px;background:#CC3399;text-align:center;line-height:220px" // 创建文本 var node = document.createTextNode("添加元素"); // 标签追加文本 para.appendChild(node); // 获取元素 var element = document.getElementById("div1"); // element追加para element.appendChild(para); } </script>
</body>

</html>

效果

在这里插入图片描述

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

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

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

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

(0)


相关推荐

  • Java list foreach_java的foreach

    Java list foreach_java的foreach例子://使用com.google.guava包创建集合List<String>list=Lists.newArrayList(“a”,”b”,”c”,”d”);//1、正常遍历list.forEach(item->System.out.println(item));//2、根据条件遍历list.forEach…

  • 网页在线视频下载教程(m3u8格式介绍及下载教程)「建议收藏」

    简介:m3u8文件是苹果公司使用的HTTPLiveStreaming(HLS)协议格式的基础。HLS是新一代流媒体传输协议,其基本实现原理为将一个大的媒体文件进行分片,将该分片文件资源路径记录与m3u8文件(即playlist)内,其中附带一些额外描述(比如该资源的多带宽信息等…)用于提供给客户端。客户端依据该m3u8文件可获取对应的媒体资源,进行播放。因此,客户端获取HLS流文件,主…

  • 实时数据库与时序数据库区别_时间序列数据库

    实时数据库与时序数据库区别_时间序列数据库1、概述在工业大数据数据库存储领域,除了传统的关系型数据库和分布式数据库以外,还有一种类型的数据库是非常常用,而且是非常有必要的,就是实时数据库,以及时序数据库。但是,大家可能会有疑问,都是专门处理时序数据的,这是两种数据库吗?他们之间有什么联系?1.1发展历史实时数据库是数据库系统的一个分支,它适用于处理不断更新的快速变化的数据及具有时间限制的事务处理。实时数据库技术是实时系统和数据库技术相结合的产物。实时数据库最起初是基于先进控制和优化控制而出现的,对数据的实时性要求比较高,因而实时、高效

  • 怎么让Java输入字符串_怎么让Java获取用户输入的字符串[通俗易懂]

    怎么让Java输入字符串_怎么让Java获取用户输入的字符串[通俗易懂]从控制台动态输入数据,对数据进行各种各样的处理,然后将数据输出是很常见的操作。现在对数据的输入方式进行系统的介绍:Scanner类的调用相关方法:hasNext()判断扫描器中当前扫描位置后是否还存在下一段。hasNextLine()如果在此扫描器的输入中存在另一行,则返回true。next()查找并返回来自此扫描器的下一个完整标记。nextLine()此扫描器执行当前行,并返回跳过的输入信息。…

  • 示波器1x和10x_示波器标笔x10和X1的理解

    示波器1x和10x_示波器标笔x10和X1的理解示波器1x10x功能  选择1X档时,信号是没经衰减进入示波器的。而选择10X档时,信号是经过衰减到1/10再到示波器的。当选择10X档时,应该将示波器上的读数也扩大10倍,这就需要在示波器端可选择X10档,以配合探头使用,否则读数会相差10倍。当我们要测量较高电压时,就可以先利用探头的10X档功能,将较高电压衰减后进入示波器。另外,10X档的输入阻抗比1X档要高得多,所以在测试驱

    2022年10月10日
  • 用nginx转发请求tomcat 如何配置访问日志获取真实ip

    用nginx转发请求tomcat 如何配置访问日志获取真实ip

发表回复

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

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