jquery Append, prepend, before, etc.

1.jQuery Append () method

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

Copy CodeThe code is as follows:
$ ("P"). Append ("Some appended text.");

2.jQuery prepend () method

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

Copy CodeThe code is as follows:
$ ("P"). Prepend ("Some prepended text.");

3. After () and before () methods

The JQuery after () method inserts content after the selected element.
The JQuery before () method inserts content before the selected element.
Instance

Copy CodeThe code is as follows:
$ ("img"). After ("Some text after");
$ ("img"). Before ("Some text before");

A little bit of the script below to add

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

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

The After () method inserts content after the selected element.

The Before () method inserts the content before the selected element.

Demo Code:

?

12345678910111213141516171819

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script><div class="testdiv">  <ul>    <li>第一个li标签</li>  </ul></div><script>  //append  $(‘.testdiv ul‘).append(‘<li>append 插入的li</li>‘);  //prepend  $(‘.testdiv ul‘).prepend(‘<li>prepend 插入的li</li>‘);  //after  $(‘.testdiv ul‘).after(‘<li>after 插入的li</li>‘);  //before  $(‘.testdiv ul‘).before(‘<li>before 插入的li</li>‘);</script>

After running:

HTML structure diagram

jquery Append, prepend, before, etc.