首頁 >web前端 >html教學 >動態產生HTML元素並為元素追加屬性

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

不言
不言原創
2018-04-26 17:03:242606瀏覽

這篇文章主要介紹了關於動態產生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中文網其他相關文章!

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