jQuery Girl
  1. jQuery Girl
  3. appendTo () et append () fonctionnent, appendChild () ne fonctionne pas
Intereting Posts
jQuery remplace le texte en laissant les frères et soeurs intacts Echec du chargement d’images JQuery sur le simulateur iPhone MobiOne CakePHP ne fonctionnera pas avec Ajax jQuery DIV avec défilement circulaire Info-bulle de l’interface utilisateur JQuery avec atsortingbuts de données Couverture de la taille de l’arrière-plan au tag img TypeError jQuery offset (). Top n’est pas défini Comment faire en sorte que le menu déroulant du bouton d’amorçage puisse être sélectionné au clavier Liaison d’une sélection Select2 à des données de modèle Vue js Mouseup bug dans tous les navigateurs sauf Firefox? jQuery colorbox: Comment changer la position de la colorbox Comment trouver les coordonnées de la souris (problème avec setTimeout)? Ajouter un titre à la boîte de fantaisie Jquery Plusieurs autocompletes sur la même page Comment faire un ajout au lieu d’une concaténation

appendTo () et append () fonctionnent, appendChild () ne fonctionne pas

Dans le cadre d’une interface de téléchargement de fichier par glisser-déposer, showImage est appelée lorsqu’un fichier est déposé sur le conteneur cible. showImage vérifie que le fichier est une image, lit le fichier, crée un nouvel object Image , définit les données du fichier d’image supprimé en tant que src et insère le nouvel élément dans le DOM.

Pour une insertion DOM, l’appel de appendTo ou append de jQuery fonctionne, mais la méthode native appendChild renvoie l’erreur: Uncaught TypeError: undefined is not a function . Quelle est la raison pour ça? 

 var showImage = function(droppedImg) { var imageType = /image.*/; if (droppedImg.type.match(imageType)) { var reader = new FileReader(); reader.onload = function(e) { if (e.target.readyState == FileReader.DONE) { newImg = new Image(); newImg.onload = function(e) { if (e.target.readyState == Image.DONE) { //No DOM insertion. Throws this error: Uncaught TypeError: undefined is not a function var dropTarg = document.querySelectorAll('.drop-container'); dropTarg.appendChild(newImg); //Image inserted into DOM $('.drop-container').append(newImg); //Image inserted into DOM $(newImg).appendTo('.drop-container'); } }; newImg.src = reader.result; } } reader.readAsDataURL(droppedImg); } };

querySelectorAll() renvoie une liste de nœuds. Pour obtenir le premier élément, accédez-y par index: 

 var dropTarg = document.querySelectorAll('.drop-container')[0]; dropTarg.appendChild(newImg);

Un certain traitement des erreurs pour s’assurer qu’il trouve quelque chose serait probablement en ordre. 

 querySelectorAll()

renvoie toujours la liste de nœuds en direct, qui ressemble à un tableau. Vous devez donc utiliser .each() ou une for loop , ou spécifier l’index de l’élément que vous ciblez.