タグの内容ではなくタグ名を変更できるかどうか知りたいです。私はこのコンテンツを持っています
< wns id="93" onclick="wish(id)">...< /wns>
ウィッシュ関数で変更したい
< lmn id="93" onclick="wish(id)">...< /lmn>
私はこの方法を試しました
document.getElementById("99").innerHTML =document.getElementById("99").replace(/wns/g,"lmn")
しかし、それは機能しません。plz は、すべての wns タグではなく、特定の ID を持つ特定のタグを変更したいだけであることに注意してください。
ありがとうございました。
既存のDOM要素のタグ名を変更することはできません。代わりに、置換を作成してから、要素があった場所に挿入する必要があります。
これの基本は、子ノードを置換に移動し、同様に属性をコピーすることです。たとえば、次のようになります。
var wns = document.getElementById("93");
var lmn = document.createElement("lmn");
var index;
// Copy the children
while (wns.firstChild) {
lmn.appendChild(wns.firstChild); // *Moves* the child
}
// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}
// Replace it
wns.parentNode.replaceChild(lmn, wns);
実例:( 私はdivandpではなくwnsandを使用lmnし、変更を確認できるように境界線のあるスタイルシートを使用してスタイルを設定しました）
document.getElementById("theSpan").addEventListener("click", function() {
alert("Span clicked");
}, false);
document.getElementById("theButton").addEventListener("click", function() {
var wns = document.getElementById("target");
var lmn = document.createElement("p");
var index;
// Copy the children
while (wns.firstChild) {
lmn.appendChild(wns.firstChild); // *Moves* the child
}
// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}
// Insert it
wns.parentNode.replaceChild(lmn, wns);
}, false);div {
border: 1px solid green;
}
p {
border: 1px solid blue;
}<div id="target" foo="bar" onclick="alert('hi there')">
Content before
<span id="theSpan">span in the middle</span>
Content after
</div>
<input type="button" id="theButton" value="Click Me">再利用可能な関数については、この要点を参照してください。
補足：idすべて数字の値は使用しないようにします。これらはHTMLでは有効ですが（HTML5以降）、CSSでは無効であるため、これらの要素のスタイルを設定したり、CSSセレクターを使用して要素と対話するjQueryなどのライブラリを使用したりすることはできません。
var element = document.getElementById("93");
element.outerHTML = element.outerHTML.replace(/wns/g,"lmn");
コードにはいくつかの問題があります。
document.getElementById("99").replace(/wns/g,"lmn")要素に対して置換コマンドを効果的に実行しています。Replace は文字列メソッドであるため、エラーが発生します。document.getElementById("99").innerHTMLの HTML であるに割り当てようとしています (タグ、属性、およびすべてが の一部です)。outerHTMLtextareaaを a に変更することを想像してみてくださいselect… 一方に排他的で、他方には違法な属性が非常に多くあります。システムは機能しません!ただし、できることは、新しい要素を作成し、古い要素のすべてのプロパティを指定してから置き換えることです。
<wns id="e93" onclick="wish(id)">
...
</wns>
次のスクリプトを使用します。
// Grab the original element
var original = document.getElementById('e93');
// Create a replacement tag of the desired type
var replacement = document.createElement('lmn');
// Grab all of the original's attributes, and pass them to the replacement
for(var i = 0, l = original.attributes.length; i < l; ++i){
var nodeName = original.attributes.item(i).nodeName;
var nodeValue = original.attributes.item(i).nodeValue;
replacement.setAttribute(nodeName, nodeValue);
}
// Persist contents
replacement.innerHTML = original.innerHTML;
// Switch!
original.parentNode.replaceChild(replacement, original);
jQueryを使用してタグ全体を置き換えることができます
var element = $('#99');
element.replaceWith($(`<lmn id="${element.attr('id')}">${element.html()}</lmn>`));
[...document.querySelectorAll('.example')].forEach(div => {
div.outerHTML =
div.outerHTML
.replace(/<div/g, '<span')
.replace(/<\/div>/g, '</span>')
})<div class="example">Hello,</div>
<div class="example">world!</div>これは、JavaScriptまたはjQueryを使用して実現できます。
DOM要素（この場合はタグ）を削除し、jQueryで.htmlまたは.appendmenthodsを使用して再作成できます。
$("#div-name").html("<mytag>Content here</mytag>");
また
$("<mytag>Content here</mytag>").appendTo("#div-name");