Dynamically Change Element Type With jQuery - changeElementType

Dynamically Change Element Type With jQuery - changeElementType
File Size: 11.3 KB
Views Total: 2840
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

changeElementType is a simple yet useful jQuery plugin which allows the user to dynamically change the element type of single/multiple/nested DOM elements with just one JS call.

How to use it:

1. Download and include the main JavaScript file jquery.changeelementtype.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
<script src="jquery.changeelementtype.js"></script>

2. Basic element change (div to p):

<div id="example-basic-div" data-something="foo" class="someclass">Hello, my name is Simon.</div>

3. Multiple element change (div to p)

<div class="example-multiple-div">Hello, my name is Simon.</div>
<div class="example-multiple-div">And I like to do drawings.</div>

4. Nested element change.

<select id="example-nested-select">
ar select = $('#example-nested-select');

5. Event persistence.

<div id="example-events-div">I have a click event attached to me.</div>
$('#example-events-div').click(function(e) {
  console.log("I am a " + e.target.tagName);

This awesome jQuery plugin is developed by kziv. For more Advanced Usages, please check the demo page or visit the official website.