Verschieben Sie ein Element zu einem anderen übergeordneten Element, nachdem Sie seine ID geändert haben

Lesezeit: 1 Minute

Benutzer-Avatar
Home Run

Ich habe HTML wie folgt:

<span class="file-wrapper" id="fileSpan">
    <input type="file" name="photo[]" id="photo" />
    <span class="button">Click to choose photo</span>
</span>

Ich möchte das Eingabefeld von dort extrahieren, seine ID ändern und es in ein anderes div einfügen.

Wie kann ich das machen? Wenn jQuery benötigt wird, ist das in Ordnung, aber wenn es ohne geht, wäre es großartig.

Benutzer-Avatar
Andi E

Es ist sicherlich einfach in jQuery:

// jQuery 1.6+
$("#photo").prop("id", "newId").appendTo("#someOtherDiv");

// jQuery (all versions)
$("#photo").attr("id", "newId").appendTo("#someOtherDiv");

Arbeitsdemo: http://jsfiddle.net/AndyE/a93Az/


Wenn Sie es im einfachen alten JS tun möchten, ist es immer noch ziemlich einfach:

var photo = document.getElementById("photo");
photo.id  = "newId";
document.getElementById("someOtherDiv").appendChild(photo); 

Arbeitsdemo: http://jsfiddle.net/AndyE/a93Az/1/

  • @Royi: problemlos auf ältere Versionen portierbar, einfach ändern prop() zu attr().

    – Andi E

    26. September 2011 um 13:03 Uhr

  • Sollten wir uns nicht sowieso für die neueste Version von jQuery entscheiden, wenn dies möglich ist?

    – Dan Lugg

    26. September 2011 um 13:04 Uhr

  • @Bracketworks: Das würde ich sagen. IIRC, prop() sollte etwas effizienter sein als attr() da weniger Arbeit in Bezug auf die Kompatibilität zu erledigen ist.

    – Andi E

    26. September 2011 um 13:09 Uhr

  • Es lohnt sich, das zu erklären, wenn Sie es verwenden appendChild (oder append oder appendTo) mit einem vorhandenen DOM-Element wird dieses Element an die neue Position verschoben und nicht dorthin kopiert.

    – Brandstifter

    26. September 2011 um 13:14 Uhr

  • @mblase75: vielleicht, aber ist das nicht ziemlich erklärend, wenn man den Code liest oder testet? Auf jeden Fall sollten die funktionierenden Demos jede Verwirrung beseitigen 🙂

    – Andi E

    26. September 2011 um 13:25 Uhr

1011500cookie-checkVerschieben Sie ein Element zu einem anderen übergeordneten Element, nachdem Sie seine ID geändert haben

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy