通过js动态创建标签,并设置属性方法

JavaScript028

通过js动态创建标签,并设置属性方法,第1张

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

1.创建某个标签:如下在body中创建一个div的事例;

<script>

function

fun(){

var

frameDiv

=

document.createElement("div")//创建一个标签

var

bodyFa

=

document.getElementById("bodyid")//通过id号获取frameDiv

的父类(也就是上一级的节点)

bodyFa

.appendChild(frameDiv)//把创建的节点frameDiv

添加到父类body

中;

}

<script>

<body

id="bodyid"

>

<!--在此添加div标签-->

</body>

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

frameDiv

.setAttribute("id",

"divid")//给创建的div设置id值;

frameDiv

.className="divclass"

//给创建的div设置class;

//给某个标签添加显示的值;

var

h

=

document.createElement("h1")

h.innerHTML

=

data[i].name

var

p

=

document.createElement("p")

p.innerHTML

=

"要显示的值"

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

a.不带参数:

frameDiv.onmousedown

=

fun//ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数,

而不是鼠标按下时执行;

b.有参数:

frameDiv.onmousedown

=

function(){

fun(this)

}

c.要调用的函数;

function

fun(){

alert("鼠标按下")

}

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

var

divFlag

=

document.getElementById("divFlag")

var

divMain

=

document.createElement("div")

if(divFlag

!=

null){

body.replaceChild(divMain,

divFlag)//把原来的替换掉

}

divMain.setAttribute("id",

"divFlag")

以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:JS实现给对象动态添加属性的方法JS中动态创建元素的三种方法总结(推荐)js动态创建标签示例代码使用变量动态设置js的属性名

javascript添加html标签如下:

一、直接给javascript内容添加标签

<body>

<div id='div'></div>

</body>

<script>

var oDiv = document.getElementById('div')。

oDiv.innerHTML = '<span>11112222</span>'。

</sciprt>

二、,用javascript自带的createElement添加标签

<body>     <div id='div'></div> </body> <script> var oDiv = document.getElementById('div') var oSpan = document.createElement('span') oDiv.appendChild(oSpan) </sciprt>

三、注意事项

其他属性也一样 ,只不过class是js中的关键字。

对象名.class就是语法错误所以改名为className。

其他的属性可以直接通过。

对象.属性名=‘值’。

在JS中,location.href=url设置跳转到新的标签页面的方法:

location.href就是指的当前文档的地址 不可能在新标签打开 如果要在新标签打开 必须用window.open等方法