動態生成html元素并為元素追加屬性

番茄西紅柿發布于2019-04-23 13:31 / 1220人閱讀

摘要：動態生成元素的方法有三種第一種創建元素，再用方法將元素添加到指定節點登錄第二種使用直接將元素添加到指定節點使用將元素直接添加到指定節點登錄第三種創建節點中創建對象，使用的工廠函數完成，格式如下，會根據傳入的標記字符串，創建一個對象

動態生成HTML元素的方法有三種：

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

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6 
 7 
 8 
 9 "main">
10     "login">
11 
12 
13 
14 
23 
24

第二種：使用innerHTML直接將元素添加到指定節點

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6 
 7 
 8 
 9 "main">
10     "login">
11 
12 
13 
14 
20 
21

第三種：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()方法顛倒

 1  
 2 "en">
 3 
 4    "UTF-8">
 5    
 6    
 7    
12 
13 
19 
20  
21 
22    "main">
23 
24

借鑒文檔出處：https://blog.csdn.net/fredaouyang/article/details/56481458

GPU云服務器云服務器在元素前追加html js實現動態生成元素 js在從前追加元素 js 元素后追加內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1995.html

jQuery DOM節點的創建、插入、刪除

摘要：通過方法添加的元素剛好相反，內容在方法前面，無論是一個選擇器表達式或創建作為標記上的標記它都將被插入到目標容器的末尾。主要的不同是語法特別是插入內容和目標的位置。 DOM節點的創建 DOM創建節點及節點屬性首先，介紹如何使用JavaScript創建div節點元素，主要包括創建div節點元素的屬性和創建div節點元素的樣式兩大部分內容創建流程：創建節點(常見的：元素、屬性和文本)...

rainyang 2019-08-21 11:54 評論0 收藏0
【JavaScript系列】動態綁定事件方法：(1)jquery的on方法；(2)html元素綁定

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執行順序屬性元素事件事件。元素綁定事件刪除按鈕。屬性綁定事件動態綁定事件方法的方法的屬性綁定。一、動態監聽加載對象當使用js或jQuery動態創建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監聽事件...

young.li 2019-08-26 10:20 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
Jquery就是這么簡單

摘要：在內部還是調用這些方法。對象下標，從開始對象下標，從開始再次重申對象只能調用對象的，對象只能調用對象的對象轉成值得注意的是在腳本內，是代表對象的。對象轉成對象語法也非常簡單在內寫上對象，就變成了對象了。在文檔中對它的解釋是這樣子的。什么是Jquery？ Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作就是封裝了JavaScript，能夠...

wpw 2019-08-30 14:04 評論0 收藏0