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

Editor to share with you how to add new HTML elements to jQuery. I hope you will get something after reading this article. Let's discuss it together.

JQuery-add element

With jQuery, you can easily add new elements / content.

Add new HTML content, four jQuery methods for adding new content:

Append ()-inserts content at the end of the selected element

Prepend ()-inserts content at the beginning of the selected element

After ()-inserts content after the selected element

Before ()-inserts content before the selected element

JQuery append () method

The jQuery append () method inserts content at the end of the selected element.

$(document) .ready (function () {$("# btn1") .click (function () {$("p"). Append ("Appended text.")); $("# btn2") .click (function () {$("ol") .append ("Appended item");});})

This is a paragraph.

This is another paragraph.

List item 1 List item 2 List item 3 append text append list items

JQuery prepend () method

The jQuery prepend () method inserts content at the beginning of the selected element.

("p") .prepend ("Some prepended text.")

Add several new elements through the append () and prepend () methods

In the above example, we only insert text / HTML at the beginning / end of the selected element.

However, the append () and prepend () methods can receive an unlimited number of new elements through parameters.

You can generate text / HTML through jQuery, or through JavaScript code and DOM elements.

In the following example, we create several new elements.

These elements can be created through text/HTML, jQuery, or JavaScript/DOM.

Then we append these new elements to the text through the append () method (which is also valid for prepend ()):

Function appendText () {var txt1= "

Text.

"; / / create a new element var txt2=$ ("

") .text (" Text. "); / / create a new element var txt3=document.createElement (" p ") with jQuery; txt3 [XSS _ clean] =" Text. "; / / create the text $(" body ") .append (txt1,txt2,txt3) through DOM; / / append a new element}

This is a paragraph.

After reading this article by adding text to the picture, I believe you have a certain understanding of "how to add new HTML elements to jQuery". If you want to know more about it, please follow the industry information channel. Thank you for your reading!

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.