Dynamically generate HTML elements and append attributes to elements-HTML Tutorial-php.cn

Dynamically generate HTML elements and append attributes to elements

不言

Release： 2018-04-26 17:03:24

Original

2589 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

<p class="se-preview-section-delimiter"></p>

Copy after login

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

Copy after login

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!