[JavaScript] zastępowanie wgranego wcześniej zdjęcia nowym Opcje

[followc]

Witam,
jako że moja wiedza odnośnie javascriptu ogranicza sie praktycznie tylko do jQuery, a korzystam z gotowego kodu i próbuję go nieco zedytować, błądzę dość poważnie i potrzebuję Waszej pomocy. Otóż poniższa funkcja ajaxowo wyświetla wgrane wcześniej zdjęciA. Chciałbym, żeby ograniczało się to do jednego i zastępowało wcześniej wgrane nowym.

[HTML] pobierz, plaintext 
function showUploadedItem (source) {
	  var list = document.getElementById("image-list"),
		  li   = document.createElement("li"),
		  img  = document.createElement("img");
		img.src = source;
		li.appendChild(img);
	  list.appendChild(li);
	}
[HTML] pobierz, plaintext 

Moje próby typu

[HTML] pobierz, plaintext 
function showUploadedItem (source) {
	  var list = document.getElementById("image-list"),
	   li = document.getElementById("image-list-li"),
 
		  img  = document.createElement("img");
		img.src = source;
		li.appendChild(img);
	  list.appendChild(li);
	}
[HTML] pobierz, plaintext 

Kończą się jednakowo żałośnie, więc proszę o jakieś wskazówki

[Comandeer]

li polecałbym tworzyć (tak, jak w pierwszym kodzie), natomiast nie ma sensu dowalać go na koniec listy (list.appendChild), tylko zastąpić istniejący element listy nowym (replaceChild). Coś typu:

Kod

var oldLi = list.firstElementChild; //jak musisz wspierać IE < 9, to można zrobić list.getElementsByTagName('li')[0]
var newLi = document.createElement('li');
list.replaceChild(newLi, oldLi);

[followc]

Dzięki, ale to nie jest tak że aby to co zaprezentowałeś działało dobrze musiałby już być utworzony pierwszy element, a w przypadku gdy zaczynamy od zera nam się to nie uda? Może źle się wyraziłem, ale chodzi mi o to, że na początku nie mamy nic, wgrywamy zdjęcie (do tego momentu działa tak jak sobie wymarzyłem), ale kolejne są dodawane, nie zastępowane. I gdyby nie ten szczegół Twój kod byłby git. Tak mi się wydaję, racja?

[Comandeer]

Racja, ale to wystarczy sprawdzić długość "tablicy" zwróconej przez list.getElementsByTagName('li') i jeśli wynosi 0, to dodać element przez appendChild, a jeśli więcej niż 0, to zastosować zastępowanie.

Można też po prostu od razu stworzyć listę z jednym, pustym elementem

[followc]

Niestety moje niezrozumienie JS jest zbyt duże, powstają więc takie twory...

[HTML] pobierz, plaintext 
function showUploadedItem (source) {
	  var list = document.getElementById("image-list"),
		  //li   = document.createElement("li"),
		  img  = document.createElement("img");
		img.src = source;
 
		if(list.getElementsByTagName('li') == 0){
			li   = document.createElement("li"),
			li.appendChild(img);
			list.appendChild(li);
		}else{
			var oldLi = list.firstElementChild; //jak musisz wspierać IE < 9, to można zrobić list.getElementsByTagName('li')[0]
			var newLi = document.createElement('li');
			li.appendChild(img);
			list.replaceChild(newLi, oldLi);
		}
	}
[HTML] pobierz, plaintext 

Które niewiele zmieniają...

edit. w sumie to problem jest z ifem, bo jesli zrobie if(1) to wykonuje sie tak jak trzeba (nie wiem jak z else)
edit2.

[HTML] pobierz, plaintext 
var x = list.getElementsByTagName('li');
		if(x.length == 0){
[HTML] pobierz, plaintext 

miało większe szanse powodzenia;)

Ten post edytował followc 5.09.2015, 16:28:47

[Comandeer]

http://jsfiddle.net/Comandeer/r985w37k/

[followc]

Powoli wyhaczałem moje dramatyczne błędy, nie wiem jednak czy jeszcze we wrześniu skończyłbym ten prosty problem bez Twojej pomocy. Dzięki wielkie!