本文演示了JS创建标记标签的方式:

首先,创建标签的原则是

创建节点;


var x = document.createelement(标签名)




赋予节点样式;




x.setattribute(班




将节点分配给节点。




x.innerhtml =内容/分配




将节点添加到父元素


元素添加到element.appendchild(X);




两。款式图:



三。主代码流:

HTML的一部分:



单击添加Add按钮添加标签

清除

约翰doe1添加
约翰DOE2添加
约翰doe3添加
约翰doe4添加
约翰doe5添加
约翰doe6添加






CSS部分:


体{
保证金:0;
填充:0;
背景颜色:# 002f4f;
颜色:# ffffff;
字体微软雅黑;
字体大小:1em;
}
UL,H3边缘:0;
列表样式:无;
填料:0px }
集装箱{。
宽度:300px;
身高:350px;
保证金:50px汽车;
}
dispanel {。
宽度:290px;
身高:50px;
背景颜色:# ffffff;
保证金:0汽车;
}
- {。
宽度:100px;
身高:20px;
颜色:# ffffff;
背景颜色:红色;
边境:0px;
字体大小:1em;
保证金:0 10px 5px 10px;
}
集装箱UL
宽度:300px;
身高:30px;
边距:10px;
}
spanstyle {display: inline块;
颜色:# 000;
宽度:85px;身高:22px;
背景颜色:浓汤;
左:5px保证金;
字体大小:12px;
文本对齐:中心;
行高:22px;
}




js的一部分:


VaR,= document.getelementbyid(UL);
VaR的OBTN = oul.getelementsbyclassname(-);
VaR OLI = document.getelementsbyclassname(礼);
无功obox = document.getelementbyid(盒子);
对于(var i = 0;i < obtn.length;i++){
OBTN {我}。onclick =函数(){
VaR OA = document.createelement(跨); / /创建一个节点
VaR的一种= oa.setattribute(班
VaR OSPAN = this.previouselementsibling.innerhtml + / /这= =X;OBTN {我} / previouselementsiling:对兄弟节点元素
oa.innerhtml = OSPAN; / / OSPA值到新创建的节点OA。
obox.appendchild(OA); / /添加OA obox儿子
OA。onclick=函数(){
obox.removechild(OA); / /删除元素
}
}
}
无功obtn1 = document.getelementbyid(BTN1 );
obtn1。onclick =函数(){
obox .innerHTML = / /明确的内容;
}




更多关于Javascript相关内容的内容可以看到特殊的站点:

希望本文能对javascript程序设计有所帮助。