cari

Rumah >hujung hadapan web >tutorial js >通过在js动态中创建标签,并设置属性方法（详细教程）

通过在js动态中创建标签,并设置属性方法（详细教程）

亚连
亚连asal
2018-06-04 17:14:593084semak imbas

下面我就为大家分享一篇通过js动态创建标签，并设置属性方法，具有很好的参考价值，希望对大家有所帮助。

当我们在写jsp页面时，往往会遇到这种情况：从后台获取的数据个数不确定，此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签：

1.创建某个标签：如下在body中创建一个p的事例；

<script>
 function fun(){
 var framep = document.createElement("p");//创建一个标签
 var bodyFa = document.getElementById("bodyid");//通过id号获取framep 的父类（也就是上一级的节点）
 bodyFa .appendChild(framep);//把创建的节点framep 添加到父类body 中；
 }
<script>
<body id="bodyid" >
<!--在此添加p标签-->
</body>

2.添加属性：给创建的标签添加相应的属性：

framep .setAttribute("id", "pid");//给创建的p设置id值；
framep .className="pclass"; //给创建的p设置class；
//给某个标签添加显示的值；
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";

3.创建的标签添加事件：

a.不带参数：

framep.onmousedown = fun;//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数， 而不是鼠标按下时执行；

b.有参数：

framep.onmousedown = function(){ fun(this); }

c.要调用的函数；

function fun(){ 
alert("鼠标按下");
}

4.如果担心创建的标签没有被覆盖则可以替换：

 var pFlag = document.getElementById("pFlag");
 var pMain = document.createElement("p");
 if(pFlag != null){
 body.replaceChild(pMain, pFlag);//把原来的替换掉
}
pMain.setAttribute("id", "pFlag");

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在jQuery中实现标签子元素的添加和赋值方法

在jQuery中如何改变P标签文本值

在vue cli webpack中如何使用sass（详细教程）

Atas ialah kandungan terperinci 通过在js动态中创建标签,并设置属性方法（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在jQuery中实现标签子元素的添加和赋值方法Artikel seterusnya：在JS中如何生成随机数（详细教程）

Artikel berkaitan

Lihat lagi