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


相关推荐

  • 挖矿区块链_传说中的区块链挖矿是什么?「建议收藏」

    挖矿区块链_传说中的区块链挖矿是什么?「建议收藏」对于区块链来说,挖矿是必须的吗?首先,我们来说下挖矿是什么?以比特币为例,每一笔交易发生后,并不算完成,交易数据必须写入数据库,才算成立,对方才能真正收到钱。首先,所有的交易数据都会传送到矿工那里。矿工负责把这些交易写入区块链。计算哈希的过程叫挖矿,计算哈希的机器就叫做矿机,操作矿机的人就叫做矿工。根据比特币协议,一个区块的大小最大是1MB,而一笔交易大概是500字节左右,因此一个区块最多可以包…

    2022年5月8日
    39
  • IOS框架概览

    IOS框架概览

    2021年12月4日
    42
  • printf的题目

    以前学习于渊老师的《自己动手写操作系统》一书的时候,也自己实现过printf,不过那是比较简单的版本。最近看《程序员面试宝典》,做到这么一道题目:#include<stdio.h>int

    2021年12月25日
    38
  • C语言链表详解_c语言中链表的使用

    C语言链表详解_c语言中链表的使用链表是一种常见的基础数据结构,结构体指针在这里得到了充分的利用。链表可以动态的进行存储分配,也就是说,链表是一个功能极为强大的数组,他可以在节点中定义多种数据类型,还可以根据需要随意增添,删除,插入节点。链表都有一个头指针,一般以head来表示,存放的是一个地址。链表中的节点分为两类,头结点和一般节点,头结点是没有数据域的。链表中每个节点都分为两部分,一个数据域,一个是指针域。说到这里你应该就明白…

    2025年8月25日
    2
  • 设计管理员表;webservice用于网络安全的高端内提供服务的

    设计管理员表;webservice用于网络安全的高端内提供服务的

    2022年1月8日
    43
  • SpringBoot自动装配原理「建议收藏」

    SpringBoot自动装配原理「建议收藏」SpringBoot项目无需各种配置文件,一个main方法,就能把项目启动起来。那么我们看看SpringBoot是如何进行自动配置和启动的。SpringBoot通过main方法启动SpringApplication类的静态方法run()来启动项目。根据注释的意思,run方法从一个使用了默认配置的指定资源启动一个SpringApplication并返回ApplicationContext对象,这个默认配置如何指定呢?这个默认配置来源于@SpringBootApplication注解,这个注解是个复

    2022年8月20日
    4

发表回复

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

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