首頁  >  文章  >  web前端  >  如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼)

如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼)

不言
不言原創
2018-07-21 11:35:352128瀏覽

這篇文章跟大家分享的是關於如何動態產生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(&#39;a&#39;);
    link.setAttribute(&#39;href&#39;,&#39;#&#39;);
    link.setAttribute(&#39;id&#39;,&#39;login&#39;);
    link.style.color = &#39;green&#39;;
    link.innerHTML = &#39;登录&#39;;
    var main = document.getElementById(&#39;main&#39;);
    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(&#39;a&#39;);
    //使用innerHTML将元素直接添加到指定节点
    main.innerHTML = "<a href=&#39;#&#39; id=&#39;login&#39; style=&#39;color: red;&#39;>登录</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=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);
   $(&#39;#main&#39;).append(link).addClass("newStyle");
   })
</script>
</head>
 
<body>
   <div id="main"></div>
</body>
</html>

相關推薦:

如何使用html中table實作td邊框的效果(程式碼)

詳解前端在html頁面之間傳遞參數的方法
#

以上是如何動態產生html元素以及為元素追加屬性的方法介紹(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn