本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家。动态生成HTML元素的方法有三种:
第一种:document.createElement()创建元素,再用appendChild( )方法将元素添加到指定节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title ></ title >
</ head >
< body >
< div id = "main" >
< span id = "login" ></ span >
</ div >
</ body >
< script >
var link = document.createElement('a');
link.setAttribute('href','#');
link.setAttribute('id','login');
link.style.color = 'green';
link.innerHTML = '登录';
var main = document.getElementById('main');
main.appendChild(link);
</ script >
</ html >
|
第二种:使用innerHTML直接将元素添加到指定节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title ></ title >
</ head >
< body >
< div id = "main" >
< span id = "login" ></ span >
</ div >
</ body >
< script >
var link = document.createElement('a');
//使用innerHTML将元素直接添加到指定节点
main.innerHTML = "< a href = '#' id = 'login' style = 'color: red;' >登录</ a >";
</ script >
</ html >
|
第三种:jQuery创建节点
阅读剩余部分
相关阅读 >>
如何动态生成html元素以及为元素追加属性的方法介绍(附代码)
更多相关阅读请进入《动态生成html元素》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何动态生成html元素以及为元素追加属性的方法介绍(附代码)