改进了`replaceTag(<tagName>)`

Question

这可能吗？

示例：

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


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

因此，点击更改锚点会导致<p>Hello!</p>部分更改为（例如）h5标记，以便在点击后结束<h5>Hello!</h5>。我意识到你可以删除p标签并用h5替换它，但实际上是否有修改HTML标签？

Answer 1

一旦创建了dom元素，我相信标签是不可变的。你必须做这样的事情：

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

Answer 2

这是一个扩展，它将以尽可能多的方式在尽可能多的元素上完成所有这些......

使用示例：

保留现有的类和属性：


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

或

放弃现有的类和属性：


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

甚至

用跨度替换所有div，复制类和属性，添加额外的类名


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

插件来源：

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

Answer 3

您应该更改标记的样式（或者更确切地说，标记具有特定ID的标记），而不是更改标记的类型。更改文档元素以应用样式更改不是一个好习惯。试试这个：

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

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

Answer 4

我注意到第一个答案并不是我所需要的，所以我进行了一些修改，并认为我会把它发回这里。

改进了`replaceTag(<tagName>)`

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

<强>参数：

tagName： String

标签名称，例如“div”，“span”等。



withDataAndEvents： Boolean

“一个布尔值，指示是否应该将事件处理程序与元素一起复制。从jQuery 1.4开始，元素数据也将被复制。” info



deepWithDataAndEvents： Boolean ，

一个布尔值，指示是否应复制克隆元素的所有子项的事件处理程序和数据。默认情况下，其值与第一个参数的值（默认为false）匹配。“info

退货：

新创建的jQuery元素

好的，我知道现在有几个答案，但是我自己再把它写下来了。

在这里，我们可以像使用克隆一样替换标签。我们遵循与.clone()相同的语法，withDataAndEvents和deepWithDataAndEvents复制子节点的数据和事件（如果使用的话）。

<强> 实施例

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

<强> 来源：

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

请注意，此不会替换所选元素，而是返回新创建的元素。

Answer 5

我提出了一种方法，您可以使用jQuery对象的字符串表示形式，并使用正则表达式和基本JavaScript替换标记名称。您不会丢失任何内容，也不必遍历每个属性/属性。

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

最后，您可以按如下方式替换现有对象/节点：

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

Answer 6

这是我的解决方案。它允许在标签之间切换。

＆＃13;

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

＆＃13;

Answer 7

想法是包装元素并拆开内容：

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

样品用量：

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

Demo

Answer 8

这是使用jQuery在DOM中更改HTML标签的快速方法。我发现此replaceWith()函数非常有用。

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

Answer 9

您可以通过data-*之类的data-replace="replaceTarget,replaceBy"属性来实现，因此在获得值然后使用jQuery的帮助下，可以通过replaceTarget方法通过replaceBy方法获得.split()和.replaceWith()值data-*方法。
此$(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>

#include <stdio.h>

int main()
{
    int arr[]={1,2,3};
    int*ptr=arr;
    printf("%d\t %d\t %d\t %p\t %d \n",arr[0],arr[1],arr[2],ptr,*ptr);
    *ptr++=-1;
    printf("%d\t %d\t %d\t %p\t %d \n",arr[0],arr[1],arr[2],ptr,*ptr);
     *++ptr=-2;
    printf("%d\t %d\t %d\t %p\t %d \n",arr[0],arr[1],arr[2],ptr,*ptr);
    (*ptr)++;
    printf("%d\t %d\t %d\t %p\t %d \n",arr[0],arr[1],arr[2],ptr,*ptr);
    return 0;
}

Answer 10

以下功能可以解决问题，并保留所有属性。您可以像这样使用它：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())
    })
  }
}

为确保其正常工作，请查看以下示例

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>

Answer 11

是否有特定原因需要更改标签？如果你只是想让文本更大，那么改变p标签的CSS类将是一个更好的方法。

这样的事情：

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

使用jQuery更改HTML标记？

11 个答案:

改进了`replaceTag(<tagName>)`

<强> 实施例

<强> 来源：

使用jQuery更改HTML标记？

11 个答案:

改进了replaceTag(<tagName>)

<强> 实施例

<强> 来源：

改进了`replaceTag(<tagName>)`