jQuery - Überprüfen Sie, ob das DOM-Element bereits vorhanden ist

Ich versuche, einige Formularelemente dynamisch über Ajax mit jQuery hinzuzufügen. Ich möchte sicherstellen, dass ich nicht zweimal dasselbe Element erstelle. Daher möchte ich es nur hinzufügen, wenn es noch nicht zum DOM hinzugefügt wurde.

Alle meine Elemente haben eine eindeutige CSS-ID, zum Beispiel:

$('#data_1')

Ich verwende Folgendes, um zu überprüfen, ob das Element bereits vorhanden ist:

if ($('some_element').length == 0) {
    //Add it to the dom
}

Es funktioniert jedoch nur für Elemente, die bereits beim ersten Laden Teil der Seite waren.

Wie überprüfe ich auch, ob Elemente nach dem Laden der Seite dynamisch erstellt wurden?

Jeder Rat wird geschätzt.

Vielen Dank.

Dies sollte für alle Elemente funktionieren, unabhängig davon, wann sie generiert werden.

if($('some_element').length == 0) {
}

Schreiben Sie Ihren Code in die Ajax-Rückruffunktionen und es sollte gut funktionieren.

Bei dieser Frage geht es darum, ob ein Element vorhanden ist und alle Antworten prüfen, ob es nicht vorhanden ist :) Kleiner Unterschied, aber erwähnenswert.

Basierend auf der jQuery-Dokumentation wird empfohlen, die Existenz zu überprüfen

if ($( "#myDiv" ).length) {
    // element exists
}

Wenn Sie lieber nach fehlenden Elementen suchen möchten, können Sie Folgendes verwenden:

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

oder

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

Beachten Sie bitte, dass ich in der zweiten Option === verwendet habe, die etwas schneller als == ist, und die 0 als Yoda-Bedingung links gesetzt habe .

Nur um zu bestätigen, dass Sie das Element richtig auswählen. Probier diese

if ($('#some_element').length == 0) {
    //Add it to the dom
}

Vermutlich haben Sie vergessen, den Artikel an DOM anzuhängen.

Überprüfen Sie es HIER .

wenn IDverfügbar - Sie können verwendengetElementById()

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

ODER Versuchen Sie es mit Jquery -

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

Wenn es existiert, spuckt es das angegebene Element als DOM-Objekt aus. Mit JQuery erfahren $('.elem')Sie nur, dass es sich um ein Objekt handelt, wenn es gefunden wurde, aber nicht um welches.

In diesem Fall möchten Sie möglicherweise überprüfen, ob das Element im aktuellen DOM vorhanden ist

Wenn Sie überprüfen möchten, ob ein Element im DOM-Baum vorhanden ist (der an das DOM angehängt ist), können Sie Folgendes verwenden:

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

if ($('#some_element').length === 0) {
    //If exists then do manipulations
}

Nein, um etwas zu vergleichen, Sie können dies einfach überprüfen, indem Sie ...,.

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

Sie können auch die Funktion html () verwenden

if($("#url).html()){alert('exist');}

Denken Sie auch an die Verwendung

$(document).ready(function() {});

Ich weiß nicht, warum sich hier noch niemand das ausgedacht hat (irgendwie traurig). Wann führen Sie Ihren Code aus ??? Gleich zu Beginn? Dann möchten Sie vielleicht die oben erwähnte ready () -Funktion verwenden, damit Ihr Code ausgeführt wird, nachdem die gesamte Seite (mit all ihren dom-Elementen) geladen wurde und nicht vorher! Dies ist natürlich nutzlos, wenn Sie Code ausführen, der nach dem Laden der Seite dom-Elemente hinzufügt! Dann möchten Sie einfach auf diese Funktionen warten und anschließend Ihren Code ausführen ...