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:352117browse
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('a');
link.setAttribute('href','#');
link.setAttribute('id','login');
link.style.color = 'green';
link.innerHTML = '登录';
var main = document.getElementById('main');
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('a');
//使用innerHTML将元素直接添加到指定节点
main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</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=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').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!