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)
上一篇 2022年6月22日 上午10:46
下一篇 2022年6月22日 上午11:00


相关推荐

  • linux挂载新磁盘

    linux挂载新磁盘当一个新盘挂载的linux上,可以通过fdisk-l指令,查看挂载的磁盘信息,此时虽然已经挂载到主机上,但是主机还不能正常使用。要想使用新磁盘,需要经过如下几步:磁盘分区磁盘格式化挂载分区到某个目录经过上面三部后,就可以使用上新的磁盘了,接下来讲解每一步具体应该如何操作磁盘分区$fdisk-l#查看主机所有的磁盘列表如上图可以看出/dev/vda是新的磁盘并且没有进行分区操作,接下来对/dev/vda磁盘进行分区操作$fdisk/dev/vda//

    2022年6月19日
    35
  • vue子组件向父组件传值的三种方式_vue子组件改变父组件的值

    vue子组件向父组件传值的三种方式_vue子组件改变父组件的值1、前言日常积累,欢迎指正2、正文vue2.6.11博客正文为三种方法的核心代码记录,源代码在vue-project的分支dev-005,可以直接获取代码运行查看2.1、子组件中直接this.$parent.parentNameInParentMethod()/**父组件*/exportdefault{methods:{search…

    2022年10月2日
    3
  • Nginx搭建小型图片服务器

    Nginx搭建小型图片服务器

    2021年6月1日
    124
  • 约定俗成的版本号命名规则是什么_2017版命名规则

    约定俗成的版本号命名规则是什么_2017版命名规则版本号的格式为`X.Y.Z[主版本号.次版本号.修订号]`,版本号递增规则如下:1.`主版本号`:一般当软件整体重写,或出现不向后兼容的改变时,`主版本号递增1,次版本清零,修订号清零`,如1.9.1->2.0.0。2.`次版本号`:一般功能更新或者增加功能时,`主版本号不变,次版本号递增1,修订号不变`。3.`修订号`:当Bug修复发布时,`主版号不变,次版本号不变,修订号递增1`。开发一个新项目时一般以`0.1.0`作为你的初始化开发版本,并在后续的每次发行时

    2025年10月23日
    9
  • 如何开发一个个人微信小程序,微信小程序开发入门教程

    如何开发一个个人微信小程序,微信小程序开发入门教程做任何程序开发要首先找到其官方文档 我们先来看看其有哪些官方文档 微信小程序开发文档链接为 https mp weixin com debug wxadoc dev index html 如下图 这里就是做微信小程序开发的全部官方文档 知道了文档的位置 下面我们来介绍下如何做一个微信小程序开发 第一步 下载微信小程序开发者工具并安装 下载路径 https mp weix

    2026年3月18日
    2
  • html超链接样式「建议收藏」

    html超链接样式「建议收藏」a:link,定义正常链接的样式;a:visited,定义已访问过链接的样式;a:hover,定义鼠标悬浮在链接上时的样式;a:active,定义鼠标点击链接时的样式。

    2022年7月19日
    26

发表回复

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

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