Paragraph count

Question

I need to pass a script to a site where in the content, between the 3 and the 4 paragraph, an advertisement appears.

I can read what the 3 paragraph of a text and insert a DIV after it, with JS or JQUERY?

Answer 1

You can pick up the paragraph using .eq(índice) and insert something after it using .after().

If the container for a div any, catching hair id:

$(function(){
   var pub = '<div class="pub">publicidade</div>';
   $("#div p:eq(2)").after(pub);
});
// eq(0) = 1º elemento
// eq(1) = 2º elemento 
// eq(2) = 3º elemento ←
// eq(3) = 4º elemento

p{
   background: yellow;
}

.pub{
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
   <p>parágrafo 1</p>
   <p>parágrafo 2</p>
   <p>parágrafo 3</p>
   <p>parágrafo 4</p>
</div>

If the container is the same body:

$(function(){
   var pub = '<div class="pub">publicidade</div>';
   $("p:eq(2)").after(pub);
});
// eq(0) = 1º elemento
// eq(1) = 2º elemento 
// eq(2) = 3º elemento ←
// eq(3) = 4º elemento

p{
   background: yellow;
}

.pub{
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>parágrafo 1</p>
<p>parágrafo 2</p>
<p>parágrafo 3</p>
<p>parágrafo 4</p>

• Selector documentation :eq()
• Method documentation .after()

Answer 2

If I understand correctly, taking into account that your paragraphs are inside some container with an identifier, da para fazer com Jquery as follows:

var div = $('<div> Essa é a DIV de propaganda! </div>');
 $('.main').find('p:nth-child(3)').after(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="main">
    <p> 1º Parágrafo! </p>
    <p> 2º Parágrafo! </p>
    <p> 3º Parágrafo! </p>
    <p> 4º Parágrafo! </p>
</section>

Just locate the third paragraph and after it, use the function after() to insert your div.

Answer 3

You can pick up the paragraph using :eq(índice) and insert something after using .after().

    $( "body" ).find( "div" ).eq( 2 ).addClass( "aliceblue" );

    $(function(){
       var container = '<div>publicidade</div>';
       $("p:eq(2)").after(container);
    });

        $( "div" ).eq(1).css( "background-color", "yellow" );

        $( "div:eq(0)" ).css( "color", "red" );

      div {
        margin: 10px;
        float: left;
        border: 2px solid blue;
      }
      .aliceblue {
        background:aliceblue;
      }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div>zero</div>
    <div>um</div>

    <div>dois
    <p>parágrafo 1</p>
    <p>parágrafo 2</p>
    <p>parágrafo 3</p>
    <p>parágrafo 4</p>
    </div>

    <div>tres</div>
    <div>quatro</div>

notice that .eq and :eq do basically the same thing. The difference between them can be seen in this post (English) by clicking the button Run tests on that page eq vs eq()