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)
blank

相关推荐

  • 前端面试题 vue_vue面试题必问

    前端面试题 vue_vue面试题必问1.自我介绍2分钟,200-300个字,主旨自己基本情况,工作经历,优点,兴趣爱好,职业规划,邀约2.vue面试题1.v-show和v-if区别的区别:v-show通过cssdisplay控制显示和隐藏,v-if组件真正的渲染和销毁,而不是显示和隐藏,频繁切换状态使用v-show否则v-if2.为何v-for要用key快速查找到节点,减少渲染次数,提升渲染性能3.描述vue组件声明周期mm单组件声明周期图挂载:beforeCreate=>created=

  • mysql 触发器介绍「建议收藏」

    mysql 触发器介绍「建议收藏」触发器(Trigger)是MySQL中非常实用的一个功能,它可以在操作者对表进行「增删改」之前(或之后)被触发,自动执行一段事先写好的SQL代码。本教程带领大家在实践中学习,你将学到触发器

  • 2018年最全Go语言教程零基础入门到进阶实战视频

    2018年最全Go语言教程零基础入门到进阶实战视频

  • (十一)模仿学习

    (十一)模仿学习  从之前的讨论看,都是有奖励的。哪怕是上一章的稀疏奖励,其实也有奖励。==假如任何奖励都没有怎么办?==本章介绍的就是这种情况的解决办法。什么时候任何奖励都没有。其实还挺常见的,以聊天机器人为例,聊的好不好很难定义奖励。解决这种情况的方法就是模仿学习  模仿学习(imitationlearning),有时也叫示范学习或者学徒学习。指有一些专家的示范,通过模仿这些专家来达到目的。专家的示范含义很广,比如在自动驾驶中,一个司机的行为就可以被称为专家的示范。  模仿学习中主要有两个方法:行为克隆和逆强化

  • 现在的SEO最须要会点啥

    现在的SEO最须要会点啥

    2021年11月16日
  • dfs算法java(java算法预测)

    packagecom.yangkaile.generator;importlombok.extern.slf4j.Slf4j;importorg.junit.jupiter.api.Test;importjava.util.*;/***@description:DFA算法案例*@className:ApplicationTest*@author:wangdong*@Date:2021/7/2615:56*/@Slf4jpublicclas.

发表回复

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

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