Einführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (Code im Anhang)-HTML-Tutorial-php.cn

Einführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (Code im Anhang)

不言

Freigeben： 2018-07-21 11:35:35

Original

2169 Leute haben es durchsucht

Dieser Artikel gibt Ihnen eine Einführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (mit Code). Ich hoffe, dass er allen helfen kann.

Es gibt drei Möglichkeiten, HTML-Elemente dynamisch zu generieren:

Die erste: document.createElement(), um ein Element zu erstellen, und dann Verwenden Sie die Methode appendChild(), um Elemente zum angegebenen Knoten hinzuzufügen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main">
    <span id="login"></span>
</div>
</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>

Nach dem Login kopieren

Zweite Methode: Verwenden Sie innerHTML, um Elemente direkt zum angegebenen Knoten hinzuzufügen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main">
    <span id="login"></span>
</div>
</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>

Nach dem Login kopieren

Dritte Methode: jQuery erstellt Knoten

Erstellt DOM-Objekt in jQuery. Verwenden Sie zum Vervollständigen die Factory-Funktion $() von jQuery. Das Format lautet wie folgt:

$(html), $(html) erstellt ein DOM-Objekt basierend auf dem eingehenden HTML-Markup Zeichenfolge und fügen Sie diese hinzu. Das DOM-Objekt wird in ein jQuery-Objekt eingeschlossen und dann an die Startseite zurückgegeben.

Fügen Sie den erstellten Knoten in den Text in jQuery ein, verwenden Sie append() und andere Methoden. Die Methoden zum Einfügen von Knoten in jQuery sind:

1. : an jedes Inhalt innerhalb übereinstimmender Elemente anhängen

2.appendTo(): Alle übereinstimmenden Elemente an das angegebene Element anhängen und dabei die herkömmliche Methode $(A).append(B) umkehren, anstatt B an anzuhängen A, aber A an B anhängen

3.prepend(): Inhalt innerhalb jedes übereinstimmenden Elements voranstellen

4.prependTo(): Alle übereinstimmenden Inhalte voranstellen Dem angegebenen Element voranstellen, invertiert mit der prpend()-Methode

5.after(): Inhalt nach jedem passenden Element einfügen

6.insertAfter(): Alle passenden Elemente einfügen Das Element wird nach dem angegebenen Element eingefügt, das wird mit der after()-Methode umgekehrt

7.before(): Inhalt vor jedem passenden Element einfügen

8.insertBefore(): Jedes einfügen Ein passendes Element wird vor dem angegebenen Inhalt eingefügt, invertiert mit der before()-Methode

<!DOCTYPE html> 
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <script src="jquery-1.11.1.min.js"></script>
   <style type="text/css">
       .newStyle{
            color:red
       }
   </style>

<script>
   $(function(){
   var link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);
   $(&#39;#main&#39;).append(link).addClass("newStyle");
   })
</script>
</head>
 
<body>
   <div id="main"></div>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

So verwenden Sie eine Tabelle in HTML, um den Effekt eines td-Rahmens (Code) zu erzielen

Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

Das obige ist der detaillierte Inhalt vonEinführung in die dynamische Generierung von HTML-Elementen und das Hinzufügen von Attributen zu Elementen (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!