Dynamiczne dodawanie elementów w JS/jquery

Dynamiczne dodawanie elementów w JS/jquery
O1
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 10 lat
  • Postów:1
0

Próbuje dodać nowe elementy do DOM na stronę za pomocą append, jednak nic się nie dzieję.

Kopiuj
$("#button0").click(function() {
     var newDiv = document.createElement("div");
	   newDiv.class= "wrzuta";
     var nextDiv= document.createElement("iframe");
          nextDiv.class= "frameZ";
	 nextDiv.src= "https://www.google.pl/maps/search/maps/@52.4744665,16.9540072,11z"; 
         nextDiv.width= "800";
         nextDiv.height= "300";
     var commentDiv = document.createElement("div");
	 commentDiv.id= "commentix";
	 commentDiv.text="Komentarze";
     var comment = document.createElement("p");
$(".Uploads").append(newDiv);
$(newDiv).append(nextDiv);
$(nextDiv).append(commentDiv);
$(commentDiv).append(comment);

});

część elementów zadeklarowałem w CSS.

Co robię nie tak?

edytowany 1x, ostatnio: dzek69
dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około 2 miesiące
  • Lokalizacja:Rzeszów
0
  1. Używaj tagów kolorujących składnię
  2. Kod podawaj w takiej formie, żeby dało się go użyć - czyli potrzebne fragmenty HTML/CSS. Najlepiej to wrzucaj kod na np. jsbin.com tak jak ja.
  3. Kod działa. Dwie rzeczy, które robisz źle:
  • Próbujesz dokleić coś do IFRAME - tak nie można. To jest w elemencie IFRAME faktycznie, ale miej na uwadze to, że to, co zawiera się w tagu IFRAME to zawartość, która zostaje wyświetlona, gdy przeglądarka nie obsługuje ramek (aktualnie to zapewne żadna), bądź ramki są zablokowane przez użytkownika.
  • Nie ma takiego atrybutu jak "class" w elementach DOM. Jest za to obiekt classList, zawierający takie metody jak add() - sprawdź w moim kodzie jak poprawiłem JEDNO wywołanie tego (drugie popraw sam). Poczytaj też o tym jakie inne metody są w classList.

Nie bardzo też rozumiem, po co tak mieszasz natywny JS i jQuery. Nie lepiej wybrać jedno?
Element w jQuery możesz stworzyć np. tak:

Kopiuj
var $nextDiv = $('<iframe />').attr('src', 'https://www.google.pl/maps/search/maps/@52.4744665,16.9540072,11z').width(800).height(300).addClass('frameZ');
// $nextDiv jest obiektem jQuery, nie elementem DOM! Do jQuerowego `append` możesz jednak podać co chcesz.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.