これは可能ですか？
例：
$('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タグを変更する方法はありますか？
回答:
dom要素が作成されると、タグは不変になると思います。あなたはこのようなことをしなければならないでしょう：
$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));これは、すべての要素に対して、さまざまな方法ですべてを実行する拡張機能です...
使用例：
既存のクラスと属性を保持します。
$('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);
});
}
});return node;実際にreturn this;は、プラグインの「古いバージョン」に示されているはずです。これは、次のようにイベントを連結するために不可欠です$("tr:first").find("td").clone().replaceTag("li").appendTo("ul#list")
タグのタイプを変更するのではなく、タグのスタイル（または特定のIDのタグ）を変更する必要があります。文書の要素を変更してスタイルの変更を適用することはお勧めできません。これを試して：
$('a.change').click(function() {
$('p#changed').css("font-weight", "bold");
});
<p id="changed">Hello!</p>
<a id="change">change</a>最初の答えが私が必要とするものではないことに気づいたので、私はいくつかの変更を加えて、ここに投稿することを考えました。
replaceTag(<tagName>)
replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])
引数：
戻り値：
新しく作成された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);
})
}
})これは選択した要素を置き換えるのではなく、新しく作成された要素を返すことに注意してください。
.children()は純粋なテキストノードを含まないことに注意してください。.contents()IIRC を試してみてください。
アイデアは、要素をラップして内容を展開することです：
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');私は、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);これが私の解決策です。タグを切り替えることができます。
<!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>これは、jQueryを使用してDOM内のHTMLタグを変更する簡単な方法です。このreplaceWith（）関数は非常に便利です。
var text= $('p').text();
$('#change').on('click', function() {
target.replaceWith( "<h5>"+text+"</h5>" );
});次の方法で達成することができます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>次の関数はトリックを実行し、すべての属性を保持します。たとえば、次のように使用します。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>タグを変更する必要がある特定の理由はありますか？テキストを大きくしたいだけの場合は、pタグのCSSクラスを変更することをお勧めします。
このようなもの：
$('#change').click(function(){
$('p').addClass('emphasis');
});