JQuery: Wie kann ich ein Tag ersetzen, ohne den Inhalt zu stören?

Question

Ich bin auf der Suche nach einer Technik, die JQuery verwendet, um einen html-Tag (sowohl öffnend als auch schließend) zu entfernen, ohne den Inhalt zu stören.

Zum Beispiel mit diesem Markup...

<div id="myDiv">
   Leave My Content alone!
</div>

Ich möchte dazu kommen...

<span id="mySpan">
     Leave My Content Alone!
</span>

Was ich ausprobiert habe:
Ich dachte an $("#myDiv").remove oder $("#myDiv").replaceWith, aber beide zerstören den Inhalt des Tags.

Wie immer sind wir für Ihre Unterstützung dankbar!

Answer 1

Am einfachsten wäre es, wenn Sie so vorgehen würden:

$("#myDiv").replaceWith('<span id="mySpan">' + $("#myDiv").html() + "</span>");

Allerdings, das auseinanderfällt, wenn Sie feststellen, dass Sie alle Ereignisabonnenten für alle Elemente innerhalb Ihrer <div /> . Ein besserer Weg, dies zu tun, ist umziehen den Inhalt in ein neues <span /> Tag kurz vor dem <div /> Tag, dann entfernen Sie die <div /> etwa so:

var yourDiv = $("#myDiv");
var yourSpan = $('<span id="mySpan"></span>');
yourDiv.before(yourSpan);
yourSpan.append(yourDiv.children());
yourDiv.remove();

Dadurch wird das Wrapping-Tag "geändert", ohne dass die eigentlichen Elemente innerhalb Ihrer <div /> Tag. Alle Ereignisteilnehmer sollten auf allen Elementen innerhalb des <div /> .

Answer 2

Werfen Sie einen Blick auf die Beispiel der replaceWith Methode. Ich weiß, Sie sagten, Sie wüssten davon, aber ich glaube, Sie haben sie falsch angewendet. Hier ist ein Ausschnitt dessen, was dort erwähnt wird:

$("button").click(function () {
  $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

Vielleicht möchten Sie aber auch $(this).html() anstelle von $(this).text() . Ich empfehle Ihnen trotzdem, sich die Seite anzuschauen. Klicken Sie auf die Schaltflächen, um zu sehen, dass es wirklich das tut, was es zu tun vorgibt :) Tut mir leid, wenn ich Ihre Frage falsch verstanden habe.

Answer 3

Ich würde vorschlagen, dass Sie den innerHTML-Wert in einer Zeichenkette speichern, dann können Sie das neue Element ersetzen oder entfernen und hinzufügen und dann das innerHTML des neuen Wertes festlegen.

Eine andere Lösung wäre, zum übergeordneten Element des zu ersetzenden Elements zu gehen und die Eigenschaft innerHTML zu ändern, indem man die <div> y </div> con <span> y </span> .

Dies ist ein bisschen schwieriger, vor allem, da Sie sicherstellen müssen, dass, wenn Sie mehrere divs innerhalb der innerHTML haben, dass Sie nur die eine von Interesse ersetzen.