This time I will share jQuery Plugin and tutorial about Dynamically Change Element Type With jQuery – changeElementType, hope it will help you in programming stack.
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.
2 |
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery.changeelementtype.js"></script> |
2. Basic element change (div to p):
1 |
<div id="example-basic-div" data-something="foo" class="someclass">Hello, my name is Simon.</div> |
1 |
$('#example-basic-div').changeElementType('p'); |
3. Multiple element change (div to p)
1 |
<div class="example-multiple-div">Hello, my name is Simon.</div> |
2 |
<div class="example-multiple-div">And I like to do drawings.</div> |
1 |
$('.example-multiple-div').changeElementType('p'); |
4. Nested element change.
1 |
<select id="example-nested-select"> |
1 |
ar select = $('#example-nested-select'); |
2 |
select.children().changeElementType('div'); |
3 |
select.changeElementType('div'); |
5. Event persistence.
1 |
<div id="example-events-div">I have a click event attached to me.</div> |
1 |
$('#example-events-div').click(function(e) { |
2 |
console.log("I am a " + e.target.tagName); |
4 |
.changeElementType('p'); |
This awesome jQuery plugin is developed by kziv. For more Advanced Usages, please check the demo page or visit the official website.
