JS动态创建div_JavaScript和jQuery动态创建元素
2016-10-17 17:23:25  By: dwtedx

在JavaScript的开发中经常会遇到动态创建Element的时候、也就是动态创建标签的方法、本文就为大家介绍一下使用JavaScript动态创建节点元素的方法


JavaScript a标签创建

1、创建元素

var alink= document.createElement("a");


2、添加元素属性

alink.href= "http://www.dwtedx.com";
alink.target="_blank";

//或者
//设置属性href值为 http://www.dwtedx.com
alink.setAttribute("href", "http://www.dwtedx.com");


3、将创建的元素添加到 id为id 的元素下

getElementById("#id").appendChild(alink);

 

JavaScript 创建表 table

var table= document.createElement("table");
var row= table.isertRow(-1);//(-1)表示在最后 添加一行row(tr)到table
var td1= row.insertCell(-1)(-1)表示在最后 添加一行cell(td)到tr
ducument.body.addendChild(table);将table 添加到body


jQuery动态创建a 标签元素

1、创建元素 及添加属性

var alink = $("<a href="http://www.dwtedx.com" target="_blank"  title="这是一个链接">");


2、将创建的元素添加到 id为id 的元素下

$("#id").append(alink); //被动添加


以上(1、2、)两步代码等同于

$("<a href="http://www.abc.com" target="_blank"  title="这是一个链接">").appendTo("#id"); //主动添加


关键字

1、propend/propendTo将创建的元素追加添加到该元素的内部的元素前面(即作为下级级元素)

2、将创建的元素追加添加到该元素的内部的元素后面 (即作为下级级元素)

3、before/insertBefore将创建的元素追加添加到该元素前面(即作为兄弟级元素)

4、after/insertAfter将创建的元素追加添加到该元素后面(即作为兄弟级元素)


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+