Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to modify the DOM structure of jQuery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Directly using the API provided by the browser to modify the DOM structure, not only the code is complex, but also to write different code for the browser.

With jQuery, we focus on manipulating the jQuery object itself, and the underlying DOM operations are done by jQuery, which makes it much easier to modify DOM.

Add DOM

To add a new DOM node, in addition to the violent method of jQuery's html (), you can use the append () method, for example:

JavaScript Python Swift

How do I add a language to the list? The first step is to get the node:

Var ul = $('# test-div > ul')

Then, call append () to pass in the HTML fragment:

Ul.append ('Haskell')

In addition to accepting strings, append () can also pass in the original DOM object, jQuery object, and function object:

/ / create DOM object: var ps = document.createElement ('li'); PS [XSS _ clean] =' Pascal';// add DOM object: ul.append (ps); / / add jQuery object: ul.append ($('# scheme')); / / add function object: ul.append (function (index, html) {return 'Language -' + index +';})

When you pass in a function, you are required to return a string, DOM object, or jQuery object. Because append () of jQuery may act on a set of DOM nodes, only incoming functions can generate different child nodes for each DOM.

Append () adds DOM to the end, and prepend () adds DOM to the front.

Also note that if the DOM node you want to add already exists in the HTML document, it will first be removed from the document and then added, that is, with append (), you can move a DOM node.

If you want to insert a new node at a specified location, for example, between JavaScript and Python, you can navigate to JavaScript first, and then use the after () method:

Var js = $('# test-div > ul > li:first-child'); js.after ('Lua')

That is, sibling nodes can use the after () or before () methods.

Delete nod

To delete the DOM node, simply call the remove () method after getting the jQuery object. If the jQuery object contains several DOM nodes, you can actually delete more than one DOM node at a time:

Var li = $('# test-div > ul > li'); li.remove (); / / all deleted "how jQuery modifies DOM structure" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.