<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>");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.