JQuery Example: Add Content - Clone And Prependto

<!DOCTYPE html>
<title>JQuery Example: Add Content - Clone And Prependto</title> 
<style>
div {
  color: white;
  padding: 1em;
  margin: 1em;
}
.file {
  background: limegreen;
}
.folder {
  background: gold;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
  $( function() {
    $( ".file" ).click( function() {
      $( this ).clone().prependTo( ".folder" );
    });
  });
</script>

<div class="file">
  File
</div>

<div class="folder">
  Folder
</div>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

Using the jQuery Library

The above example relies on the jQuery library. This is loaded in the part that reads . Removing that part will prevent the example from working properly.

jQuery is an open source and cross-platform JavaScript library that can help web developers perform document traversal and manipulation, event handling, animation, Ajax, applying styles, and more. It provides an easy way for us to mainipulate the document object model (DOM).

To use the jQuery library in your own projects, you can use a CDN (like the above example uses), or you can download your own library. See the jQuery website for more information.