CODEWITHSUNDEEP
jquery
web-dev
web-dev

Reputation: 151

Adding Content To The DOM Using JQuery

I'm trying to add an <h2> element after the second <p> in each <article> element. Can someone explain why article p:nth-child(3) works? At first glance I would think this syntax points to the third <p>in each <article>. Also, are there more efficient ways of doing this? Trying to get a better grasp of JQuery. Thanks.

    (function(){
      $('<h2></h2>', {
        text: 'hello',
        class: 'million'
      }).insertAfter('article p:nth-child(3)');
    })();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <article>
    <h1>My Awsome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
  </article>
  <article>
    <h1>My Awsome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
  </article>
 
</body>
</html>

Upvotes: 0

Views: 27

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

nth-child will select the child element of the parent in position n, no matter what the other child tags are.

You are simply restricting it to also match p tags, in other words, select the 3rd child of each article which is a p tag. Because you have an h1 at the start of each article, the 3rd child becomes the 2nd p.

If you want the second p tag, then you can use the :nth-of-type selector - p:nth-of-type(2). As the docs on MDN for this selector say:

This is a more flexible and useful pseudo selector [than nth-child] if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

This should do what you need:

    (function(){
      $('<h2></h2>', {
        text: 'hello',
        class: 'million'
      }).insertAfter('article p:nth-of-type(2)');
    })();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <article>
    <h1>My Awsome Post</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
  </article>
  <article>
    <h1>My Awsome Post</h1>
    <h2>Some sub-heading to increase the number of other children</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat
    </p>
  </article>
 
</body>
</html>

Upvotes: 2

Related Questions