Heim >Web-Frontend >HTML-Tutorial >Generieren Sie dynamisch HTML-Elemente und hängen Sie Attribute an Elemente an
Dieser Artikel befasst sich hauptsächlich mit der dynamischen Generierung von HTML-Elementen und dem Anhängen von Attributen an Elemente. Jetzt kann ich ihn mit Ihnen teilen.
Der erste: document.createElement()
erstellt ein Element und verwendet dann die Methode appendChild()
, um das Element zum angegebenen Knoten hinzuzufügen;
fügt ein Element hinzu:
<!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('a'); link.setAttribute('href','#'); link.setAttribute('id','login'); link.style.color = 'green'; link.innerHTML = '登录'; var main = document.getElementById('main'); main.appendChild(link); </script> </html>
Der zweite Typ: Verwenden Sie innerHTML
, um Elemente direkt zum angegebenen Knoten hinzuzufügen:
<!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('a'); //使用innerHTML将元素直接添加到指定节点 main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>"; </script> </html>
Der dritte Typ: jQuery
Knoten erstellen
Erstellen Sie ein DOM-Objekt in jQuery und verwenden Sie es Um die Factory-Funktion $()
von jQuery zu vervollständigen, lautet das Format wie folgt:
$(html);
$(html)
erstellt ein DOM-Objekt basierend auf der übergebenen HTML-Markup-Zeichenfolge und Wickeln Sie dieses DOM-Objekt in ein jQuery
Das Objekt wird zurückgegeben
Fügen Sie den erstellten Knoten in den Text in jQuery ein, verwenden Sie Methoden wie append()
Die Methoden zum Einfügen von Knoten in jQuery sind:
1.
append()
: Inhalt an jedes passende Element anhängen2: Alle passenden Elemente an das angegebene Element anhängen und dabei das reguläre
3.appendTo()
umkehren Methode, anstatt B an in A anzuhängen, aber A an B anhängen$(A).append(B)
Methode: Inhalt in jedem passenden Element voranstellen
4.prepend()
: Alle passenden Elemente hinzufügen Der Inhalt wird dem angegebenen Element vorangestellt, was mit der
5.prependTo()
-Methode umgekehrt wirdprpend()
Inhalt nach jedem passenden Element einfügen
6.after()
Alle passenden Elemente einschließen Das Element wird nach dem angegebenen Element eingefügt, was mit der Methode
7.insertAfter()
umgekehrt wirdafter()
Inhalt vor jedem passenden Element einfügen
8.before()
Jedes passende Element einfügen Das Element wird vor dem angegebenen Inhalt eingefügt und die
insertBefore()
-Methode wird umgekehrtbefore()
<!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=$('<a href="#" id="link" style="color:pink">登录</a>'); $('#main').append($link); }) </script> </head> <body> <p id="main"></p> </body> </html>
1. Verwenden Sie DOM
//使用createElement创建元素 var dialog = document.createElement('p'); var img = document.createElement('img'); var btn = document.createElement('input'); var content = document.createElement('span'); // 添加class dialog.className = 'dialog'; // 属性 img.src = 'close.gif'; // 样式 btn.style.paddingRight = '10px'; // 文本 span.innerHTML = '您真的要GG吗?'; // 在容器元素中放入其他元素 dialog.appendChild(img); dialog.appendChild(btn); dialog.appendChild(span);2. Verwenden Sie eine HTML-Vorlage
var popContent =[ '<li class="monitory-point-li" indexcode="00000000001310013631">', '<span class="checkbox-unchecked"></span>', '<span class="monitory-text" title="'+name+'">'+formedName+'</span>', '</li>' ].join(' '); $('.document').append(popContent);
<p class="se-preview-section-delimiter"></p>Verwandte Empfehlungen:
jQuery funktioniert HTML-Element-Klickereignisse Ausführliche Erklärung
Das obige ist der detaillierte Inhalt vonGenerieren Sie dynamisch HTML-Elemente und hängen Sie Attribute an Elemente an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!