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>

效果

在这里插入图片描述

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

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

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


相关推荐

  • mysql连接不上navicat_mysql安装版步骤

    mysql连接不上navicat_mysql安装版步骤问题:解决方法:命令行登录mysql后执行如下命令alteruser’root’@’localhost’identifiedwithmysql_native_passwordby’密码’;使用我们给的密码进行navicat连接测试:…

    2022年10月14日
    1
  • Vue上传文件_vue 上传文件

    Vue上传文件_vue 上传文件使用FormData()方法上传文件

    2022年8月15日
    2
  • findwindowex函数用法_内核防止findwindow

    findwindowex函数用法_内核防止findwindow函数功能:该函数获得一个顶层窗口的句柄,该窗口的类名和窗口名与给定的字符串相匹配。这个函数不查找子窗口。在查找时不区分大小写。函数型:HWNDFindWindow(LPCTSTRIpClassName,LPCTSTRIpWindowName);参数:IpClassName:指向一个指定了类名的空结束字符串,或一个标识类名字符串的成员的指针。IpWindowName:指向一个指定了窗口名(窗…

    2022年8月13日
    11
  • 阿里云服务器centos 7上安装Apache

    阿里云服务器centos 7上安装Apache阿里云服务器centos 7上安装Apache

    2022年4月23日
    44
  • gateway网关详解_网关和网桥的定义

    gateway网关详解_网关和网桥的定义3.5.Gateway网关的概念之前的操作,我们有了管理他的配置中心和注册中心。下一步我们就要配置网关了。于是,问题就要回到什么是网关?以及为什么要配置网关上来了。先聊聊为什么要配置网关。注册中心相当于对各种服务进行调度,把他们安排的明明白白的。但注册中心能力再打,他也没办法安置前端的请求,让他们一一入座,也没办法对一些恶意请求进行拦截。问题就出现了,前端服务此时只能自己在配置里改变请求的位置,而且,每次改变请求就要更改配置,重新上线。恶意请求也无法拦截。这显然是不合理的。于是,网关出现了。

    2022年10月11日
    1
  • DOM attributes and properties

    DOM attributes and properties

    2022年1月9日
    37

发表回复

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

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