Append Div After 1st Paragraph For Each Article When More Than 1 Paragraph

Question

Is it possible to append ( rather than use .after() ) a HTML div after the first paragraph of text for each article only when there's at least 2 paragraphs for each article, otherwise don't add the div?

  $('.content').each(function() { var $this = $(this); if ($this.children('p').length >= 2) { $this.append('<div id="toggle">Read More</div>'); $('p').not('p:first-child').wrap('<div class="text" />'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> 

This is what i need to achieve. The divs are only added when there's more than 1 paragraph of text for each content div.

<div class="content">
<p>This is an example of a paragraph</p>
<div class="text" />
<p>This is an example of a paragraph</p>
<div id="toggle">Read More</div>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
<div class="text" />
<p>This is an example of a paragraph</p>
<div id="toggle">Read More</div>
</div>

Answer 1

You were so close!

 $('.content').each(function() { var $this = $(this); if ($this.children('p').length >= 2) { $this.append('<div id="toggle">Read More</div>'); } }); 

 .content { border:1px solid red; margin-bottom:10px; } .content p { margin:0; } .content #toggle { margin-top:5px; color:cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> 

Answer 2

Is it possible to append ( rather than use .after() ) a HTML div after the first paragraph of text for each article only when there's at least 2 paragraphs for each article, otherwise don't add the div?

— Answer: Yes, it's possible.

Note: Your id="toggle" is not unique, you may only have one unique ID per page, or you blow up the internet.

Example

 let $read = $('<div class="read">Read More</div>'); let $text = $('<div class="text"></div>'); $(document).ready(function() { $('.content').filter(function() { return $(this).find('p').length > 1; }).append($read.clone()).find('p:first').after($text.clone()); }); 

 .content { border: 1px solid #999; margin-bottom: 1rem; } .read { background: #eee; border-top: 1px solid #999; color: #369; text-align: center; } .text { background: #9c9; padding: .5rem; } p { margin: 0; padding: 1rem; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> </div> <div class="content"> <p>This is an example of a paragraph</p> <p>This is an example of a paragraph</p> </div>