Web-Frontend
HTML-Tutorial
Generieren Sie dynamisch HTML-Elemente und hängen Sie Attribute an Elemente an
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.
Wie man HTML-Elemente dynamisch generiert. Es gibt drei Typen:
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: jQueryKnoten 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>Nach dem Login kopieren
Javascript hängt das HTML-Element dynamisch an Es gibt zwei Hauptlösungen:
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);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);Nach dem Login kopieren
oder verwenden Sie diese Schreibmethodevar 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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1379
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
