這篇文章跟大家分享的是關於如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼),內容很不錯,有需要的朋友可以參考一下,希望可以幫助到大家。
動態產生HTML元素的方法有三種:
第一種:document.createElement()建立元素,再用appendChild( )方法將元素新增至指定節點
<!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直接將元素新增至指定節點
<!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建立節點
##jQuery中建立DOM對象,使用jQuery的工廠函數$( )完成,格式如下:
$(html),$(html)會根據傳入的HTML標記字串,建立一個DOM對象,並將這個DOM物件包裝成一個jQuery物件後再回到前台頁面上。jQuery中將建立的節點插入文字中,使用append( )等方法,jQuery中插入節點方法有:
1. append():向每個符合的元素內部追加內容2.appendTo():將所有符合的元素追加到指定元素中,顛倒了常規的$(A).append(B)方法,不是將B追加到A中,而是將A追加到B中3.prepend():向每個符合的元素內部前置內容4.prependTo():將所有符合的內容前置到指定的元素中,與prpend( )方法顛倒5.after():向每個匹配的元素之後插入內容6.insertAfter():將所有匹配的元素插入到指定元素的後面,與after()方法顛倒7.before():在每個匹配的元素之前插入內容8.insertBefore():將每個符合的元素插入指定內容之前,與before()方法顛倒<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js"></script> <style type="text/css"> .newStyle{ color:red } </style> <script> $(function(){ var link=$('<a href="#" id="link" style="color:pink">登录</a>'); $('#main').append(link).addClass("newStyle"); }) </script> </head> <body> <div id="main"></div> </body> </html>相關推薦:
以上是如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!