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


相关推荐

  • 利用ADB命令强制卸载oppo自带浏览器

    利用ADB命令强制卸载oppo自带浏览器

    2020年11月19日
  • 通俗易懂的Latex教程文档[通俗易懂]

    通俗易懂的Latex教程文档[通俗易懂]本篇文档可以搭配视频讲解使用。讲解视频:通俗易懂的Latex教程(附数学建模国赛美赛模板)这是一份面向刚入门数模,想要快速上手Latex排版的同学的Latex教学文档。在线编辑网站overleaf:https://www.overleaf.com/我所使用的环境:TeXLive(自带编辑器TeXworks) 编辑器:TeXstudioTeXLive和TeXstud

    2022年7月14日
  • WdatePicker时间插件

    WdatePicker时间插件

    2021年9月19日
  • windows10、windows11无法连接到打印机,错误代码0x0000011b,不删 KB5005565更新的解决办法,亲测可行[通俗易懂]

    windows10、windows11无法连接到打印机,错误代码0x0000011b,不删 KB5005565更新的解决办法,亲测可行[通俗易懂]共享打印机连接失败,提示错误代码0x0000011b此故障可能是由于windows10九月累积更新KB5005565导致的,网上很多方法都是直接卸载更新。但我碰到这种情况,开始打印不了,按网上方法卸载了更新,可以了;但没过多久,又打印不了,而且再去找更新的时候,发现没有那个更新。于是又在度娘找解决方案,大部份都是卸载更新,找了很久,终于发现有位兄弟(知乎账号:afudos)提出不同的解决方法,亲测有效,万分感谢这位兄台,现转载分享给大家。第一步:在安装了打印机的电脑上点运行(wi.

    2022年9月10日
  • 面试JAVA常被问到的问题(持续更新中)

    面试JAVA常被问到的问题(持续更新中)引言有的面试会被问到有没有写博客,这时候我尴尬,不知道怎么回答,所以这篇文章仅仅是把我面试JAVA的遇到的问题记录下来而已,也算是我写博客迈出的第一步,起码,以后被问到:有没有写博客?我可以回答,我写过。 (最主要的是以后换工作我不用频繁百度常见面试题了。。。。)ps1,别把我太当回事,我是个LJ;2,说得不对的地方请多多包涵,想看更详细的请百度官方文档和其他大佬的文章;3,如果有被问到…

    2022年7月9日
  • pycharm中最常用的10个快捷键总结_PyCharm快捷键

    pycharm中最常用的10个快捷键总结_PyCharm快捷键代码编辑快捷键序号快捷键作用1CTRL+ALT+SPACE快速导入任意类2CTRL+SHIFT+ENTER代码补全3SHIFT+F1查看外部文档4CTRL+Q快速查找文档5CTRL+P参数信息(在方法中调用的参数)6CTRL+MOUSEOVERCODE基本信息7CTRL+F1显示错误或警告的描述8CTRL+I…

    2022年8月25日

发表回复

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

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