Điều này có thể không?

thí dụ:

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


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

Vì vậy, nhấp vào neo thay đổi sẽ khiến <p>Hello!</p>phần đó thay đổi thành (ví dụ) thẻ h5 để bạn kết thúc <h5>Hello!</h5>sau khi nhấp. Tôi nhận ra rằng bạn có thể xóa thẻ p và thay thế bằng h5, nhưng liệu có thực sự sửa đổi thẻ HTML không?

Một khi một yếu tố dom được tạo ra, thẻ là bất biến, tôi tin. Bạn sẽ phải làm một cái gì đó như thế này:

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

Đây là một tiện ích mở rộng sẽ làm tất cả, trên nhiều yếu tố theo nhiều cách ...

Ví dụ sử dụng:

giữ các lớp và thuộc tính hiện có:

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

hoặc là

Hủy lớp và thuộc tính hiện có:

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

hoặc thậm chí

thay thế tất cả các div bằng các nhịp, sao chép các lớp và thuộc tính, thêm tên lớp bổ sung

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

Nguồn 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);
        });
    }
});

Thay vì thay đổi loại thẻ, bạn nên thay đổi kiểu thẻ (hay đúng hơn là thẻ có id cụ thể.) Không nên thay đổi các yếu tố trong tài liệu của bạn để áp dụng các thay đổi về phong cách. Thử cái này:

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

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

Tôi nhận thấy rằng câu trả lời đầu tiên không hoàn toàn là những gì tôi cần, vì vậy tôi đã thực hiện một vài sửa đổi và hình dung tôi sẽ đăng nó trở lại đây.

Cải thiện replaceTag(<tagName>)

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

Tranh luận:

• tagName: Chuỗi
  • Tên thẻ ví dụ: "div", "span", v.v.
• withDataAndEvents: Boolean
  • "Boolean cho biết liệu trình xử lý sự kiện có nên được sao chép cùng với các phần tử hay không. Kể từ jQuery 1.4, dữ liệu phần tử cũng sẽ được sao chép." thông tin
• deepWithDataAndEvents: Boolean ,
  • Boolean cho biết liệu trình xử lý sự kiện và dữ liệu cho tất cả con của phần tử nhân bản có nên được sao chép hay không. Theo mặc định, giá trị của nó khớp với giá trị của đối số đầu tiên (mặc định là sai). " Thông tin

Trả về:

Một phần tử jQuery mới được tạo

Được rồi, tôi biết có một vài câu trả lời ở đây bây giờ, nhưng tôi đã tự mình viết nó để viết lại.

Ở đây chúng ta có thể thay thế thẻ giống như cách chúng ta sử dụng nhân bản. Chúng tôi đang theo cùng một cú pháp như .clone () với withDataAndEventsvà deepWithDataAndEventssao chép dữ liệu và sự kiện của các nút con nếu được sử dụng.

Thí dụ:

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

Nguồn:

$.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);
        })
    }
})

Lưu ý rằng điều này không thay thế phần tử đã chọn, nó trả về phần tử mới được tạo.

Ý tưởng là bọc phần tử & mở khóa nội dung:

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;
}

Sử dụng mẫu:

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

Bản giới thiệu

Tôi đã đưa ra một cách tiếp cận trong đó bạn sử dụng biểu diễn chuỗi của đối tượng jQuery của bạn và thay thế tên thẻ bằng các biểu thức thông thường và JavaScript cơ bản. Bạn sẽ không mất bất kỳ nội dung nào và không phải lặp lại từng thuộc tính / thuộc tính.

/*
 * 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);
}

Cuối cùng, bạn có thể thay thế đối tượng / nút hiện có như sau:

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

Đây là giải pháp của tôi. Nó cho phép chuyển đổi giữa các thẻ.

<!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>

Đây là cách nhanh chóng để thay đổi các thẻ HTML bên trong DOM của bạn bằng jQuery. Tôi thấy hàm thay thếWith () này rất hữu ích.

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

Bạn có thể đạt được bằng data-*thuộc tính như data-replace="replaceTarget,replaceBy"vậy với sự trợ giúp của jQuery để lấy replaceTarget& replaceByvalue theo .split()phương thức sau khi nhận giá trị rồi sử dụng .replaceWith()phương thức.
Đây data-*kỹ thuật thuộc tính để dễ dàng quản lý bất kỳ thay thế thẻ mà không thay đổi dưới đây (mã chung cho tất cả các thay tag).

Tôi hy vọng đoạn trích dưới đây sẽ giúp bạn rất nhiều.

$(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>

Hàm sau thực hiện thủ thuật và giữ tất cả các thuộc tính. Bạn sử dụng nó ví dụ như thế này: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())
    })
  }
}

Để chắc chắn rằng nó hoạt động, kiểm tra ví dụ sau

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>

Có một lý do cụ thể mà bạn cần thay đổi thẻ? Nếu bạn chỉ muốn làm cho văn bản lớn hơn, thay đổi lớp CSS của thẻ p sẽ là cách tốt hơn để làm điều đó.

Một cái gì đó như thế này:

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