JavaScript 添加一个元素标签

JavaScript 添加一个元素标签

文章目录

  • JavaScript 添加一个元素标签
    • 代码
    • 效果

代码

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>testtitle>
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>

效果

JavaScript 添加一个元素标签_第1张图片

你可能感兴趣的:(javascript,html5)