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


相关推荐

  • Latex 参考文献上标

    Latex 参考文献上标1.如何使连续的参考文献能够中间用破折号连起来?比如[6,7,8,9]变成[6-9]?方法:在文档开始前加上下面的语句命令\usepackage[numbers,sort&compress]{natbib}不但可以压缩参考文献标号,还可以进行排序,即无论正文里面的顺序怎样,显示出来都是先后顺序。在elsevier模板中,natbib包已经默认引用了,无需重新引用,改一下natb

    2022年9月10日
    0
  • Latex 公式换行 等号左对齐

    Latex 公式换行 等号左对齐Latex公式换行等号左对齐示例:\begin{equation}\begin{aligned}X^TXh-X^TY&amp;=\begin{bmatrix}x_1&amp;x_2&amp;…&amp;x_n\\1&amp;1&amp;…&amp;1\end{bmatrix}\begin{bmatrix}x_1…

    2022年6月9日
    245
  • Spring加载resource时classpath*:与classpath:的区别

    Spring加载resource时classpath*:与classpath:的区别Spring 可以通过指定 classpath 与 classpath 前缀加路径的方式从 classpath 加载文件 如 bean 的定义文件 classpath 的出现是为了从多个 jar 文件中加载相同的文件 classpath 只能加载找到的第一个文件 比如 resource1 jar 中的 package com test rs 有一个 jarAppcontex xml 文件 内容如下

    2025年5月21日
    3
  • UCloud出海记:神秘的东南亚云计算赛道,还没到划地盘的阶段 …

    UCloud出海记:神秘的东南亚云计算赛道,还没到划地盘的阶段 …

    2021年6月19日
    115
  • cnpm安装方法「建议收藏」

    cnpm安装方法「建议收藏」cnpm安装方法cnpm安装方法:npminstall-gcnpm–registry=https://registry.npm.taobao.org

    2022年10月11日
    0
  • 手动UPX脱壳演示「建议收藏」

    手动UPX脱壳演示「建议收藏」首先,用PEid打开加壳后的程序CrackmeUPX.exe,可以发现使用的是UPX壳。UPX壳是一种比较简单的压缩壳,只需要根据堆栈和寄存器的值进行调试,就能找到程序的正确入口点。当然,如果不怕麻烦的话,也可以全程单步调试,直到出现像正常程序的入口点一样特征的代码,这样就找到了入口点。用我爱激活成功教程版ollydbg打开CrackmeUPX.exe,可以看到第一条指令是pushad,这显…

    2022年7月19日
    20

发表回复

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

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