Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > How to create, then modify, and then add DOM elements with jQuery_jquery

How to create, then modify, and then add DOM elements with jQuery_jquery

WBOY
Release： 2016-05-16 16:47:38
Original
1162 people have browsed it

How to manipulate DOM elements in one go, on the fly?

For example, execute three actions in sequence [Create]-> [Modify]-> [Add].

Since jQuery supports chain operations, which is actually the builder mode of design mode, we can string three operations together to execute them.

First create a p element whose content contains an a element.

Copy code The code is as follows:

Then add a href attribute to the a element
Copy code The code is as follows:

$('

jQuery

').find('a').attr(' href', 'http://www.jquery.com')

Finally add the newly added p element to the body
Copy the code The code is as follows:

$('

jQuery

').find(' a').attr('href', 'http://www.jquery.com').end().appendTo('body')

Note that this place needs to execute end( ) operation, otherwise the element added to the body is not a p element but becomes an a element in the p element.

Actually, the end() operation cannot be equated with cancellation. It returns the previous selection, but this selection has been modified by the operation before end.
Copy code The code is as follows:







Latest Articles by Author
Latest Issues
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Set relation "OR" for meta_query ORtax_query I'm trying to use WP_Query to create a query containing a meta_query element and a tax_que...
From 2024-04-04 20:01:43
0
1
1346
"waitForSelector" times out before the element becomes visible, even though the element is on screen I'm building a checkout bot but I'm having trouble with those stupid "enter your phon...
From 2024-04-04 18:31:08
0
1
1416
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved