1、创建标签

基本语法

document：文档对象
var 变量名 = document.createElement(“标签名称”);

功能

创建一个标签。
通过 createElenemt()方法可以创建、添加、删除标签 - 图2、

等标签。

2、添加标签

基本语法

var 变量名 = document.createElement(“标签”); 直接添加到页面
父级元素.appendChild(变量名); 添加到一个标签里

功能

向父元素对象添加最后一个子元素。

代码

  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>添加、删除标签</title>
  7.         <script type="text/javascript">
  8.             var index = 0;
  9.             function addElement(){
  10.                 index++;
  11.                 var descDiv = document.createElement('p');
  12.               document.getElementById("div1").appendChild(descDiv);
  14.                 //p标签样式
  15.                 var cssStr = "width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;";
  16.                 descDiv.style = cssStr;
  17.                 //p标签文本
  18.                 descDiv.innerHTML = index+' 这是p标签';
  19.             }     
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <input type="button" value="添加" onclick="addElement()" />
  24.         <div class="main" id="div1"></div>
  25.     </body>
  26.     </html>

添加、删除标签 - 图3

代码讲解

1、创建并添加p标签

var obj = document.getElementById(“div1”); 获取id为div1的元素
var descDiv = document.createElement(‘p’); 创建p标签
obj.appendChild(descDiv); 将p标签添加的id为div1的标签中

2、设置p标签样式

var cssStr = “width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;”; 编写样式
descDiv.style = cssStr; 设置p标签的样式
descDiv.innerHTML = index+’ 这是p标签’; 设置标签的文本内容

3、删除标签

基本语法

父级元素.removeChild(子元素);

功能

删除指定元素中的指定的子元素。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>添加、删除标签</title>
    <script type="text/javascript">
        var index = 0;
        function addElement(){
            index++;
            var descDiv = document.createElement('p');
          document.getElementById("div1").appendChild(descDiv);

            //p标签样式
            var cssStr = "width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;";
            descDiv.style = cssStr;
            descDiv.onclick = function(){
                dell(descDiv);
            };
            //p标签文本
            descDiv.innerHTML = index+' 点击删除此 p标签';
        } 

        function dell(p){
            var obj = document.getElementById("div1");
            obj.removeChild(p);
        }
    </script>
</head>
<body>
    <input type="button" value="添加" onclick="addElement()" />
    <div class="main" id="div1"></div>
</body>
</html>

添加、删除标签 - 图4 代码讲解

1、给p标签添加点击事件

descDiv.onclick = function(){
dell(descDiv);
};
descDiv.onclick = function() 给p标签添加点击事件
dell(descDiv); 执行删除函数

2、设置删除函数

function dell(p){
var obj = document.getElementById(“div1”);
obj.removeChild(p);
}
var obj = document.getElementById(“div1”); 获得id为div1的元素
obj.removeChild(p); 删除指定的p标签