jQuery methods for appending elements such as append, prepend, and before

jQuery - There are many ways to append elements, such as append, prepend, beforeWait, let me give you a detailed introduction below

1.jQuery append() method

jQuery append() method is at the end of the selected element Insert content.
Example

The code is as follows:

$("p").append("Some appended text.");

2.jQuery prepend() method

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

The code is as follows:

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

3, after() and before() methods
jQuery after () method inserts content after the selected element.
jQuery before() method inserts content before the selected element.

The code is as follows:

$("img ").after("Some text after");

$("img").before("Some text before");

The editor will add something below

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

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

after() method. Insert content after the selected element.

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

Demo code:

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<p class="testp">
  <ul>
    <li>第一个li标签</li>
  </ul>
</p>

<script>

  //append
  $(&#39;.testp ul&#39;).append(&#39;<li>append 插入的li</li>&#39;);
  //prepend
  $(&#39;.testp ul&#39;).prepend(&#39;<li>prepend 插入的li</li>&#39;);
  //after
  $(&#39;.testp ul&#39;).after(&#39;<li>after 插入的li</li>&#39;);
  //before
  $(&#39;.testp ul&#39;).before(&#39;<li>before 插入的li</li>&#39;);

</script>

Rendering:

html structure diagram

The above is the detailed content of jQuery methods for appending elements such as append, prepend, and before. For more information, please follow other related articles on the PHP Chinese website!