首頁 >web前端 >html教學 >如何動態產生html元素以及為元素追加屬性的方法介紹（附程式碼）

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

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

這篇文章跟大家分享的是關於如何動態產生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元素以及為元素追加屬性的方法介紹（附程式碼）

相關文章