search

Home >Web Front-end >HTML Tutorial >Dynamically generate HTML elements and append attributes to elements

Dynamically generate HTML elements and append attributes to elements

不言
不言Original
2018-04-26 17:03:242606browse

This article mainly introduces about dynamically generating HTML elements and appending attributes to elements. It has certain reference value. Now I share it with you. Friends in need can refer to

How to dynamically generate HTML elements. There are three types:

The first one: document.createElement()Create an element, and then use the appendChild() method to add the element to the specified node;

Add a element: 

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

Second: Use innerHTML to add elements directly to the specified node: 

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

Third: jQueryCreate node
Create DOM object in jQuery, use jQuery’s factory function $() to complete, the format is as follows:

$(html);

$(html) will create a DOM object based on the incoming HTML markup string, wrap the DOM object into a jQuery object and return it.

jQuery Insert the created node into the text using methods such as append()

The methods for inserting nodes in jQuery are:

1.append( ): Append content to each matching element

2.appendTo(): Append all matching elements to the specified element, inverting the regular $(A).append(B) method, instead of appending B to A, append A to B

3.prepend() method: Prepend content inside each matching element

4.prependTo(): Prepend all matching content to the specified element, the same as prpend() Method reversal

5.after() Insert content after each matching element

6.insertAfter()Insert all matching elements Insert after the specified element, inverted with the after() method

7.before()Insert content before each matching element

8.insertBefore()Inserts each matching element before the specified content, inverted with the before() method

<!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 There are two main ways to dynamically append html elements

:
1. Use 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. Use html template

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);
<p class="se-preview-section-delimiter"></p>

or use this writing method

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;;
$(&#39;.document&#39;).append(popContent);

Related recommendations:

JQuery operation html element click event detailed explanation


The above is the detailed content of Dynamically generate HTML elements and append attributes to elements. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html 字符串 append 对象 事件 dom innerHTML
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML interactionNext article：HTML interaction

Related articles

See more