<head>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
  <header>
    <h1>Mi h1 del header</h1>
  </header>
    <nav>
       <div class="myIndex"> 
          <lo>
        
         </lo>
      </div>
  </nav>
  <section>
    <article>
    <h2>TITULO 1</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
    
     <article>
    <h2>TITULO 2</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
    
     <article>
    <h2>TITULO 3</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
    
     <article>
    <h2>TITULO 4</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
    
     <article>
    <h2>TITULO 5</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
    
     <article>
    <h2>TITULO 6</h2>
    <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo nemo aut omnis recusandae, possimus magnam aperiam repellat illum mollitia delectus autem, illo non ducimus ad corporis voluptates quaerat saepe beatae!</P>
     </article>
  </section>

  <footer>
    
  </footer>
</body>
.myIndex{
  border: 10px solid darkgrey;
  padding:10px;
  width:50%;
   display: flex;
  flex-flow: row wrap;
  
}

li{
list-style: none;
 border: 2px solid grey;
  margin:5px;
  width: 100px;
 
}
$(document).ready(function(){
  
        $(" h2").each(function(){
          var valor= $(this).text();
          $(".myIndex lo").append("<div><li>"
                         + valor +
                         "</li></div>");    
        });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.