How to add an element in jquery-Front-end Q&A-php.cn

How to add an element in jquery

青灯夜游

Release： 2022-04-28 18:52:24

Original

7493 people have browsed it

Adding method: 1. Use the "$("specified element").after(new element)" statement to add a sibling element after the specified element; 2. Use "$("specified element" ).before(new element)" statement can add sibling elements in front of the specified element; 3. Use the "$(parent element).append(child element)" statement.

How to add an element in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jquery, you can use the following methods to add elements:

after(): Add sibling elements after the specified element
before(): Add a sibling element to the front of the specified element
append(): Add a child element to the end of the specified element
prepend(): Add a child element to the beginning of the specified element

1. Use after()

# The ##after() method inserts content "behind" outside the selected element.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<span style=&#39;color:red;&#39;>一个span元素</span>";
                $("div").after(a);
            })
        })
    </script>
	<style>
		body *{
			background-color:pink;
		}
	</style>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>在div后插入一个同级节点</button>
	</body>
</html>

Copy after login

How to add an element in jquery

2. Use before()

before() to insert sibling nodes before the specified element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<span style=&#39;color:red;&#39;>一个span元素</span>";
                $("div").before(a);
            })
        })
    </script>
	<style>
		body *{
			background-color:pink;
		}
	</style>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>在div前插入一个同级节点</button>
	</body>
</html>

Copy after login

How to add an element in jquery

3. Use the append()

append( ) method to insert content "at the end" inside the selected element.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<p style=&#39;color:red;&#39;>一个p元素</p>";
                $("div").append(a);
            })
        })
    </script>
	<style>
		body *{
			background-color:pink;
		}
	</style>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>向div内的末尾处插入一个子元素</button>
	</body>
</html>

Copy after login

How to add an element in jquery

4. Use prepend()

prepend() method to insert to the "beginning" inside the selected element content.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                var a = "<p style=&#39;color:red;&#39;>一个p元素</p>";
                $("div").prepend(a);
            })
        })
    </script>
	<style>
		body *{
			background-color:pink;
		}
	</style>
	</head>
	<body>
		<h1>一个大标题</h1>
		<p>一个p段落</p>
		<div>一个div元素</div>
		<p>一个p段落</p>
		<button>向div内的开始处插入一个子元素</button>
	</body>
</html>

Copy after login

How to add an element in jquery

[Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of How to add an element in jquery. For more information, please follow other related articles on the PHP Chinese website!