Jquery replace tag with another, preserving data

Question

I have this <p> tag

<p class='form-control' data-color='inherit' data-width='12' data-type='sh_info' name='shortcode[]' data-style=''>Some dynamic text</p>

and I want, on click to replace it with a textarea tag, but I want all my data and classes to persist. I fount this function in jquery

$( "p.form-control" ).click(function() {
  $( this ).replaceWith( "<textarea>" + $( this ).text() + "</textarea>" );
});

but I was wondering is there a function that allows you to substitute just the tag with something else?

Already answered hope it helps http://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery — ganesh deshmukh, Apr 28 '17 at 15:29
Instead of replacing things, use two elements that you alternate using `.toggle()`. — Barmar, Apr 28 '17 at 15:31
@ganesh but my question is not how to add the data to the tag, but if there is a function like `$( this ).replaceWithTag('textarea');` — Cr1xus, Apr 28 '17 at 15:33

score 0 · Accepted Answer · answered Apr 28 '17 at 16:45

You can use this:

function ReplaceElement(elementToReplace, currentType, newType) {
  // Convert the elementToReplace into its string representation
  var tmp = document.createElement("div"); // Create div to wrap the elementToReplace in
  tmp.appendChild($(elementToReplace).clone()[0]); // Clone the elementToReplace and add it to the container tmp element

  // Replace the current tags with the new tags and insert after the elementToReplace
  $(tmp.innerHTML.replace("<" + currentType, "<" + newType).replace("/" + currentType + ">", "/" + newType + ">")).insertAfter(elementToReplace);


  $(elementToReplace).remove(); // Remove the old element from the DOM
}

like this:

$( "p" ).click(function() {
  ReplaceElement(this, "p", "textarea");
});

Jquery replace tag with another, preserving data

1 Answers1