JavaScript 添加一个元素标签

夏华东的博客

已于 2022-04-07 16:41:26 修改

阅读量3.1k

点赞数 1

文章标签： javascript html5

于 2022-04-07 16:32:58 首次发布

本文链接：https://blog.csdn.net/weixin_44493841/article/details/124020132

版权

JavaScript 添加一个元素标签

文章目录

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>

效果

在这里插入图片描述

夏华东的博客

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 添加一个元素标签

JavaScript 添加一个元素标签文章目录JavaScript 添加一个元素标签代码效果代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title></head><body><div id="div1"> <p id="p1">这是一个段落。</p&gt
复制链接

扫一扫