動態產生HTML元素並為元素追加屬性-html教學-PHP中文網

動態產生HTML元素並為元素追加屬性

不言

發布： 2018-04-26 17:03:24

原創

2577 人瀏覽過

這篇文章主要介紹了關於動態產生HTML元素並為元素追加屬性，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

動態產生HTML元素的方法由三種：

第一種：document.createElement()建立元素，再用appendChild()方法將元素加入指定節點;

新增a元素：

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </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 lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </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 lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <script src="jquery-1.11.1.min.js"></script>  
    <script>  
    $(function(){  
    var $link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);  
        $(&#39;#main&#39;).append($link);  

    })  
    </script>  </head>  <body>  <p id="main"></p>  </body>  </html>
登入後複製

#javascript動態追加html元素

主要有是兩種方案：

1.使用DOM

    //使用createElement创建元素
    var dialog = document.createElement(&#39;p&#39;);    
    var img = document.createElement(&#39;img&#39;);    
    var btn = document.createElement(&#39;input&#39;);    
    var content = document.createElement(&#39;span&#39;);    // 添加class
    dialog.className = &#39;dialog&#39;;    // 属性
    img.src = &#39;close.gif&#39;;    // 样式
    btn.style.paddingRight = &#39;10px&#39;;    // 文本
    span.innerHTML = &#39;您真的要GG吗？&#39;;    // 在容器元素中放入其他元素
    dialog.appendChild(img);
    dialog.appendChild(btn);
    dialog.appendChild(span);

登入後複製

2.使用html template

var popContent =[                
&#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;,                  
&#39;<span class="checkbox-unchecked"></span>&#39;,                  
&#39;<span class="monitory-text" title="&#39;+name+&#39;">&#39;+formedName+&#39;</span>&#39;,                
&#39;</li>&#39;
                ].join(&#39; &#39;);
$(&#39;.document&#39;).append(popContent);

登入後複製

<p class="se-preview-section-delimiter"></p>

登入後複製

或使用這種寫法

var popContent =  &#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;+                  
&#39;<span class="checkbox-unchecked"></span>&#39;+                  
&#39;<span class="monitory-text" title="&#39;+name+&#39;">&#39;+formedName+&#39;</span>&#39;+                
&#39;</li>&#39;;
$(&#39;.document&#39;).append(popContent);

登入後複製

相關建議：

jQuery作業html元素點擊事件詳情

####

以上是動態產生HTML元素並為元素追加屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！