Dynamically Change Element Type With jQuery - changeElementType

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" 
        integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" 
        crossorigin="anonymous">
</script>
<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>

$('#example-basic-div').changeElementType('p');

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>

$('.example-multiple-div').changeElementType('p');

4. Nested element change.

<select id="example-nested-select">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

ar select = $('#example-nested-select');
select.children().changeElementType('div');
select.changeElementType('div');

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);
})
.changeElementType('p');

---

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