Home > Article > Web Front-end > Introduction to how to dynamically generate html elements and add attributes to elements (code attached)

Introduction to how to dynamically generate html elements and add attributes to elements (code attached)

不言Original: 2018-07-21 11:35:352133browse

This article shares with you an introduction to how to dynamically generate html elements and add attributes to elements (code attached). The content is very good. Friends in need can refer to it. I hope it can help everyone.

There are three ways to dynamically generate HTML elements:

The first one: document.createElement() creates elements, and then uses appendChild() Method to add elements to the specified node

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

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

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

Third method: jQuery creates 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, and add this The DOM object is wrapped into a jQuery object and then returned to the front page.

In jQuery, insert the created node into the text, using append() and other methods. The methods of inserting nodes in jQuery are:

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

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

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

4.prependTo(): Prepend all matching content Prepend to the specified element, inverted with the prpend() method

5.after(): Insert content after each matching element

6.insertAfter(): Insert all matching elements The element is inserted after the specified element, which is reversed with the after() method

7.before(): Insert content before each matching element

8.insertBefore(): Insert each A matching element is inserted before the specified content, inverted with the before() method

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

Related recommendations:

How to use the table in HTML to achieve the effect of td border (code)

Detailed explanation of the front-end method of passing parameters between html pages

The above is the detailed content of Introduction to how to dynamically generate html elements and add attributes to elements (code attached). For more information, please follow other related articles on the PHP Chinese website!

jquery html 字符串 append 对象 dom innerHTML table td

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：Setting font style in htmlNext article：Setting font style in html

See more

Introduction to how to dynamically generate html elements and add attributes to elements (code attached)

Related articles