jQuery replaceWith test

by shazlola

HTML

<p>
    <button>Replace!</button>
</p>
<ul class="list-inline" id="tee">
 
 <div class="container-fluid te" id="t1">
 
    <h3>Joseph West</h3>
    <p>Web Developer</p>
  </div>
   <div class="container-fluid te" id="t2">
    
    <h3>Lisa Wade</h3>
    <p>Graphic Designer</p>
  </div>
   <div class="container-fluid te" id="t3">
    
    <h3>John Doe</h3>
    <p>Seo Expert</p>
  </div>
   <div class="container-fluid te" id="t4">
    <h3>Tiffany Harris</h3>
    <p>Ui Designer</p>
  </div>
</ul>

CSS

.te
{
	width:18%;
	margin-top: 4%;
	border:1px solid #cecece;
	position: absolute;
	padding: 0;
	height: 370px;


}
.te:hover
{
	border-color: #337ab7;
}
.te h3
{
	margin-top: 3%;
}
.te h3 , .te p
{
	text-align: center;
}
.te img
{
	width: 100%;
	height: 80%;

}
#t1
{
	margin-left: 10%;
}
#t2
{
	margin-left: 30%;
}
#t3
{
	margin-left: 50%;
}
#t4

{
	margin-left: 70%;
}

JavaScript

// Adapted from http://api.jquery.com/replacewith/

// When the button is clicked, item inner1 is replaced with the new
// newItem, and the classes are copied over.


$("button").on("click", function () {
   $('#tee div.te:last-child').prependTo('#tee');

    });
});