Apakah ini mungkin?

contoh:

$('a.change').click(function(){
//code to change p tag to h5 tag
});


<p>Hello!</p>
<a id="change">change</a>

Jadi mengklik jangkar perubahan harus menyebabkan <p>Hello!</p>bagian berubah menjadi (sebagai contoh) tag h5 sehingga Anda akan berakhir dengan <h5>Hello!</h5>setelah klik. Saya sadar Anda dapat menghapus tag p dan menggantinya dengan h5, tetapi adakah yang benar-benar memodifikasi tag HTML?

Setelah elemen dom dibuat, tag tidak berubah, saya percaya. Anda harus melakukan sesuatu seperti ini:

$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));

Berikut ini adalah ekstensi yang akan melakukan semuanya, pada banyak elemen dalam banyak cara ...

Contoh penggunaan:

menjaga kelas dan atribut yang ada:

$('div#change').replaceTag('<span>', true);

atau

Buang kelas dan atribut yang ada:

$('div#change').replaceTag('<span class=newclass>', false);

atau bahkan

ganti semua div dengan rentang, salin kelas dan atribut, tambahkan nama kelas tambahan

$('div').replaceTag($('<span>').addClass('wasDiv'), true);

Sumber Plugin:

$.extend({
    replaceTag: function (currentElem, newTagObj, keepProps) {
        var $currentElem = $(currentElem);
        var i, $newTag = $(newTagObj).clone();
        if (keepProps) {//{{{
            newTag = $newTag[0];
            newTag.className = currentElem.className;
            $.extend(newTag.classList, currentElem.classList);
            $.extend(newTag.attributes, currentElem.attributes);
        }//}}}
        $currentElem.wrapAll($newTag);
        $currentElem.contents().unwrap();
        // return node; (Error spotted by Frank van Luijn)
        return this; // Suggested by ColeLawrence
    }
});

$.fn.extend({
    replaceTag: function (newTagObj, keepProps) {
        // "return" suggested by ColeLawrence
        return this.each(function() {
            jQuery.replaceTag(this, newTagObj, keepProps);
        });
    }
});

Daripada mengubah jenis tag, Anda harus mengubah gaya tag (atau lebih tepatnya, tag dengan id tertentu). Ini bukan praktik yang baik untuk mengubah elemen dokumen Anda untuk menerapkan perubahan gaya. Coba ini:

$('a.change').click(function() {
    $('p#changed').css("font-weight", "bold");
});

<p id="changed">Hello!</p>
<a id="change">change</a>

Saya perhatikan bahwa jawaban pertama bukanlah yang saya butuhkan, jadi saya membuat beberapa modifikasi dan berpikir saya akan mempostingnya kembali ke sini.

Ditingkatkan replaceTag(<tagName>)

replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])

Argumen:

• tagName: String
  • Nama tag misalnya "div", "span", dll.
• withDataAndEvents: Boolean
  • "Boolean yang menunjukkan apakah event handler harus disalin bersama dengan elemen. Pada jQuery 1.4, data elemen akan disalin juga." info
• deepWithDataAndEvents: Boolean ,
  • Boolean yang menunjukkan apakah event handler dan data untuk semua anak dari elemen yang dikloning harus disalin. Secara default nilainya sesuai dengan nilai argumen pertama (yang default ke false)." Info

Pengembalian:

Elemen jQuery yang baru dibuat

Oke, saya tahu ada beberapa jawaban di sini sekarang, tetapi saya mengambil sendiri untuk menulis ini lagi.

Di sini kita dapat mengganti tag dengan cara yang sama seperti kita menggunakan kloning. Kami mengikuti sintaksis yang sama dengan .clone () dengan withDataAndEventsdan deepWithDataAndEventsyang menyalin data dan kejadian node anak jika digunakan.

Contoh:

$tableRow.find("td").each(function() {
  $(this).clone().replaceTag("li").appendTo("ul#table-row-as-list");
});

Sumber:

$.extend({
    replaceTag: function (element, tagName, withDataAndEvents, deepWithDataAndEvents) {
        var newTag = $("<" + tagName + ">")[0];
        // From [Stackoverflow: Copy all Attributes](http://stackoverflow.com/a/6753486/2096729)
        $.each(element.attributes, function() {
            newTag.setAttribute(this.name, this.value);
        });
        $(element).children().clone(withDataAndEvents, deepWithDataAndEvents).appendTo(newTag);
        return newTag;
    }
})
$.fn.extend({
    replaceTag: function (tagName, withDataAndEvents, deepWithDataAndEvents) {
        // Use map to reconstruct the selector with newly created elements
        return this.map(function() {
            return jQuery.replaceTag(this, tagName, withDataAndEvents, deepWithDataAndEvents);
        })
    }
})

Perhatikan bahwa ini tidak menggantikan elemen yang dipilih, ini mengembalikan elemen yang baru dibuat.

Ide adalah membungkus elemen & membuka isinya:

function renameElement($element,newElement){

    $element.wrap("<"+newElement+">");
    $newElement = $element.parent();

    //Copying Attributes
    $.each($element.prop('attributes'), function() {
        $newElement.attr(this.name,this.value);
    });

    $element.contents().unwrap();       

    return $newElement;
}

Penggunaan sampel:

renameElement($('p'),'h5');

Demo

Saya datang dengan pendekatan di mana Anda menggunakan representasi string dari objek jQuery Anda dan mengganti nama tag menggunakan ekspresi reguler dan JavaScript dasar. Anda tidak akan kehilangan konten apa pun dan tidak perlu mengulang setiap atribut / properti.

/*
 * replaceTag
 * @return {$object} a new object with replaced opening and closing tag
 */
function replaceTag($element, newTagName) {

  // Identify opening and closing tag
  var oldTagName = $element[0].nodeName,
    elementString = $element[0].outerHTML,
    openingRegex = new RegExp("^(<" + oldTagName + " )", "i"),
    openingTag = elementString.match(openingRegex),
    closingRegex = new RegExp("(<\/" + oldTagName + ">)$", "i"),
    closingTag = elementString.match(closingRegex);

  if (openingTag && closingTag && newTagName) {
    // Remove opening tag
    elementString = elementString.slice(openingTag[0].length);
    // Remove closing tag
    elementString = elementString.slice(0, -(closingTag[0].length));
    // Add new tags
    elementString = "<" + newTagName + " " + elementString + "</" + newTagName + ">";
  }

  return $(elementString);
}

Akhirnya, Anda dapat mengganti objek / simpul yang ada sebagai berikut:

var $newElement = replaceTag($rankingSubmit, 'a');
$('#not-an-a-element').replaceWith($newElement);

Ini solusi saya. Memungkinkan untuk beralih di antara tag.

<!DOCTYPE html>
<html>
<head>
	<title></title>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">

function wrapClass(klass){
	return 'to-' + klass;
}

function replaceTag(fromTag, toTag){
	
	/** Create selector for all elements you want to change.
	  * These should be in form: <fromTag class="to-toTag"></fromTag>
	  */
	var currentSelector = fromTag + '.' + wrapClass(toTag);

	/** Select all elements */
	var $selected = $(currentSelector);

	/** If you found something then do the magic. */
	if($selected.size() > 0){

		/** Replace all selected elements */
		$selected.each(function(){

			/** jQuery current element. */
			var $this = $(this);

			/** Remove class "to-toTag". It is no longer needed. */
			$this.removeClass(wrapClass(toTag));

			/** Create elements that will be places instead of current one. */
			var $newElem = $('<' + toTag + '>');

			/** Copy all attributes from old element to new one. */
			var attributes = $this.prop("attributes");
			$.each(attributes, function(){
				$newElem.attr(this.name, this.value);
			});

			/** Add class "to-fromTag" so you can remember it. */
			$newElem.addClass(wrapClass(fromTag));

			/** Place content of current element to new element. */
			$newElem.html($this.html());

			/** Replace old with new. */
			$this.replaceWith($newElem);
		});

		/** It is possible that current element has desired elements inside.
		  * If so you need to look again for them.
		  */
		replaceTag(fromTag, toTag);
	}
}


</script>

<style type="text/css">
	
	section {
		background-color: yellow;
	}

	div {
		background-color: red;
	}

	.big {
		font-size: 40px;
	}

</style>
</head>
<body>

<button onclick="replaceTag('div', 'section');">Section -> Div</button>
<button onclick="replaceTag('section', 'div');">Div -> Section</button>

<div class="to-section">
	<p>Matrix has you!</p>
	<div class="to-section big">
		<p>Matrix has you inside!</p>
	</div>
</div>

<div class="to-section big">
	<p>Matrix has me too!</p>
</div>

</body>
</html>

Ini cara cepat untuk mengubah tag HTML di dalam DOM Anda menggunakan jQuery. Saya menemukan fungsi replaceWith () ini sangat berguna.

   var text= $('p').text();
   $('#change').on('click', function() {
     target.replaceWith( "<h5>"+text+"</h5>" );
   });

Anda dapat mencapai dengan data-*atribut seperti data-replace="replaceTarget,replaceBy"itu dengan bantuan jQuery untuk mendapatkan replaceTarget& replaceBynilai dengan .split()metode setelah mendapatkan nilai kemudian gunakan .replaceWith()metode. Teknik atribut
ini data-*untuk mengelola penggantian tag dengan mudah tanpa mengubah di bawah (kode umum untuk semua penggantian tag).

Saya harap cuplikan di bawah ini akan banyak membantu Anda.

$(document).on('click', '[data-replace]', function(){
  var replaceTarget = $(this).attr('data-replace').split(',')[0];
  var replaceBy = $(this).attr('data-replace').split(',')[1];
  $(replaceTarget).replaceWith($(replaceBy).html($(replaceTarget).html()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="abc">Hello World #1</p>
<a href="#" data-replace="#abc,<h1/>">P change with H1 tag</a>
<hr>
<h2 id="xyz">Hello World #2</h2>
<a href="#" data-replace="#xyz,<p/>">H1 change with P tag</a>
<hr>
<b id="bold">Hello World #2</b><br>
<a href="#" data-replace="#bold,<i/>">B change with I tag</a>
<hr>
<i id="italic">Hello World #2</i><br>
<a href="#" data-replace="#italic,<b/>">I change with B tag</a>

Fungsi berikut melakukan trik dan menyimpan semua atribut. Anda menggunakannya misalnya seperti ini:changeTag("div", "p")

function changeTag(originTag, destTag) {
  while($(originTag).length) {
    $(originTag).replaceWith (function () {
      var attributes = $(this).prop("attributes");
      var $newEl = $(`<${destTag}>`)
      $.each(attributes, function() {
        $newEl.attr(this.name, this.value);
      });  
      return $newEl.html($(this).html())
    })
  }
}

Untuk memastikan itu berfungsi, periksa contoh berikut

function changeTag(originTag, destTag) {
  while($(originTag).length) {
    $(originTag).replaceWith (function () {
      var attributes = $(this).prop("attributes");
      var $newEl = $(`<${destTag}>`)
      $.each(attributes, function() {
        $newEl.attr(this.name, this.value);
      });  
      return $newEl.html($(this).html())
    })
  }
}

changeTag("div", "p")

console.log($("body").html())

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="A" style="font-size:1em">
  <div class="B" style="font-size:1.1em">A</div>
</div>
<div class="C" style="font-size:1.2em">
  B
</div>
</body>

Apakah ada alasan khusus bahwa Anda perlu mengubah tag? Jika Anda hanya ingin membuat teks lebih besar, mengubah kelas CSS tag p akan menjadi cara yang lebih baik untuk melakukannya.

Sesuatu seperti ini:

$('#change').click(function(){
  $('p').addClass('emphasis');
});