Heim > Artikel > Web-Frontend > 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

不言Original: 2018-04-26 17:03:242561Durchsuche

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(&#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>

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(&#39;a&#39;);  
    //使用innerHTML将元素直接添加到指定节点  
    main.innerHTML = "<a href=&#39;#&#39; id=&#39;login&#39; style=&#39;color: red;&#39;>登录</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ängen

2: Alle passenden Elemente an das angegebene Element anhängen und dabei das reguläre appendTo() umkehren Methode, anstatt B an in A anzuhängen, aber A an B anhängen $(A).append(B)
3.
Methode: Inhalt in jedem passenden Element voranstellen prepend()
4.
: Alle passenden Elemente hinzufügen Der Inhalt wird dem angegebenen Element vorangestellt, was mit der prependTo()-Methode umgekehrt wird prpend()
5.
Inhalt nach jedem passenden Element einfügen after()
6.
Alle passenden Elemente einschließen Das Element wird nach dem angegebenen Element eingefügt, was mit der Methode insertAfter() umgekehrt wirdafter()
7.
Inhalt vor jedem passenden Element einfügenbefore()
8.
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=$(&#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 hängt das HTML-Element dynamisch an

Es gibt zwei Hauptlösungen:

1. Verwenden Sie 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. Verwenden Sie eine HTML-Vorlage

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);

oder verwenden Sie diese Schreibmethode

<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!

JavaScript jquery html 字符串 append 对象事件 dom innerHTML

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML-InteraktionNächster Artikel：HTML-Interaktion

In Verbindung stehende Artikel

Mehr sehen