📌  相关文章
📜  jquery add - Javascript (1)

📅  最后修改于: 2023-12-03 15:32:08.085000             🧑  作者: Mango

jQuery Add - JavaScript

Introduction

jQuery is a popular JavaScript library that simplifies the process of manipulating HTML documents and events in web development. One of the most commonly used functionalities of jQuery is adding new HTML elements to a web page dynamically. In this article, we'll explore how to use jQuery to add HTML elements to a web page using JavaScript.

Adding Elements to the DOM

The Document Object Model (DOM) is a hierarchical tree structure that represents the HTML elements and their relationships to each other. jQuery provides a simple syntax to add new elements to the DOM using the append() method.

Syntax

The append() method is used to add an element or a set of elements to the end of the selected elements.

$(selector).append(content);

Let's break down the syntax:

  • $(selector) - Selects the HTML element(s) to which the new element(s) will be added.
  • content - Specifies the new HTML element(s) to be added.
Example

Let's say we have an HTML file with an empty div element:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Add Example</title>
</head>
<body>
	<div id="myDiv"></div>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		// Add a paragraph element to the empty div element
		$('#myDiv').append('<p>Hello World!</p>');
	</script>
</body>
</html>

In the example above, we first include the jQuery library using a CDN. We then use the append() method to add a new paragraph (<p>) element containing the text "Hello World!" to the empty div (<div>) element with the id "myDiv".

Additional Methods
  • prepend(): Adds an element or a set of elements to the beginning of the selected elements.
  • before(): Inserts an element or a set of elements before the selected elements.
  • after(): Inserts an element or a set of elements after the selected elements.
Conclusion

In this article, we've explored the basics of using jQuery to add new HTML elements to a web page using JavaScript. We've covered the append() method and some additional methods for adding and inserting new elements into the DOM. With these methods, you can easily manipulate HTML documents and create dynamic web applications.