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


相关推荐

  • 做饭给自己一人吃,如何最快速,且营养有保证?

    做饭给自己一人吃,如何最快速,且营养有保证?二六 ,又土又木的设计师792 人赞同作为一个长期一个人的单身狗,这个我非常有经验啊。下面介绍一下我这三四年独居生活总结下来的经验。1.周末在家多屯点儿菜放冰箱,按照每顿饭一荤一素一个汤的组合,大致估摸着买菜。肉类肯定是要一些的,肉买多了不要紧可以速冻放的久些。蔬菜就不能买多了,绿叶的尤其不能多,因为它两三天就蔫了。所以以两天内的绿叶菜再搭上一天的瓜类豆类蔬菜为宜。2.

    2022年7月15日
    18
  • DNS+Anycast 均衡负载实战(IPV4)

    DNS+Anycast 均衡负载实战(IPV4)我们建立了一个IP为6.6.6.6内网DNS服务器群,所在网段为10.211.77.0/24,而我们要实现的是在PC端(网段10.211.66.0/24)能ping通6.6.6.6,同时执行命令digwww.baidu.com@6.6.6.6A,能得到文章最开始的dig8.8.8.8类似的返回结果。

    2022年5月23日
    66
  • 激活成功教程版游戏盒子下载_pixaloop激活成功教程版

    激活成功教程版游戏盒子下载_pixaloop激活成功教程版Typora收费了,个人理解想让我花小钱钱,不可能但是用习惯了,懒得换,怎么办用不收费的旧版就ok了正巧之前重装系统有下载的安装包,分享给大家了,需要的随意,安装包的时间是2021/11/22与2021/04/07两个版本的里面有一些其他软件,需要的自取https://yxmiaoyu.lanzouo.com/b01cyja5c密码:windows…

    2022年10月12日
    4
  • python基础(2)字符串常用方法[通俗易懂]

    python基础(2)字符串常用方法[通俗易懂]python字符串常用方法find(sub[,start[,end]])在索引start和end之间查找字符串sub​找到,则返回最左端的索引值,未找到,则返回-1​start和end都可

    2022年7月30日
    8
  • html dl dt dd标签元素语法结构与使用

    html dl dt dd标签元素语法结构与使用

    2021年9月21日
    57
  • java trylock超时_java trylock以及可中断锁

    java trylock超时_java trylock以及可中断锁线程在调用lock方法来获得另一个线程所持有的锁的时候,很可能发生阻塞。应该更加谨慎地申请锁。tryLock方法试图申请一个锁,在成功获得锁后返回true,否则,立即返回false,而且线程可以立即离开去做其他事。可以调用tryLock时,使用超时参数。lock方法不能被中断。如果一个线程在等待获得一个锁时被中断,中断线程在获得锁之前一直处于阻塞状态。如果出现死锁,那么,lock方法就无法终止。A…

    2022年10月16日
    4

发表回复

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

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