[JS] Hilfe beim Einfügen von Element-Nodes

[Kraim]

Habe das Problem nach langem Überlegen selbst lösen können. Falls jemand mal vor einem ähnlichen Problem stehen sollte: Es lag daran, dass das Addon sehr unzuverlässig geladen wird und ich hab die ganze Zeit das selbe child an die Elemente angefügt, sodass es nur rumgewandert ist. Ich hätte jedes mal ein neues erstellen müssen.

 Ursprüngliche Frage

Hallo zusammen,

ich habe vor, mir ein kleines Firefox Addon zu schreiben und arbeite mich gerade ein, komme aber an einem bestimmten Punkt nicht weiter. Ich versuchs mal detailliert zu erklären:

Mein Problem:

Ich möchte einen bestimmten Element-Knoten("overlays") auf der youtube seite finden und dort einen Konten anhängen in javascript. Der "overlays" Knoten(blau markiert) taucht bei jedem video thumbnail auf und hat immer mind 1 child (die videodauer-anzeige).

 screenshot

Jetzt der Code-Teil. Wenn ich nun versuchen will, alle "overlays" Nodes/Elemente herauszufiltern, würde ich:

var v = document.body.getElementsByClassName("style-scope ytd-thumbnail");
var i;
for(i = 0;i<v.length;i++) {
	if(v[i].id == "overlays") {
                 //TODO
        }

(Gibt es einen sichereren/schöneren Weg?)

Der TODO teil wurde 98 mal aufgerufen, was auch der Gesamtzahl der videos auf der Seite entspricht(manuell nachgezählt). Auch die Anzahl der Overlays insgesamt entspricht auch hauptsächlich dem, was man erwartet hatte. so weit so gut also..

Nun weiß ich aber nicht, wie ich an die Stellen einen Knoten anhänge. theoretisch müsste es sowas sein, wie:

var testNode = document.createElement('test-knoten');
var v = document.body.getElementsByClassName("style-scope ytd-thumbnail");
var i;
for(i = 0;i<v.length;i++) {
	if(v[i].id == "overlays") {
                 document.body.getElementsByClassName("style-scope ytd-thumbnail")[i].appendChild(testNode);
        }

funktioniert aber nicht. Zumindest sind die Knoten nicht sichtbar oder verschwinden vorher wieder. Ganz gewöhnliches Einfügen klappt problemlos:

document.createElement('test-knoten');

funktioniert super, aber ist logischerweise ganz unten im code, und nicht an der richtigen Stelle.

Mein aktueller Stand ist, dass ich ein bisschen Ausgabe erzeugt habe um mal zu sehen, wo es hakt:

(der gedanke war, das body-element zu kopieren, das zu bearbeiten und später mit dem richtigen zu ersetzen. Zwischendurch habe ich mit immer die aktuellen children ausgeben lassen um zu sehen, wo und ob sie wieder verschwinden)

 Spoiler

var testNode = document.createElement('test-node');
var p = document.createElement("p");
p.setAttribute("id", "test-paragraph");

//kopiere body, um ihn zu bearbeiten
var newBody = document.body;

//children aller overlay knoten
var cc = 0;
//gefundene overlay-knoten insgesamt
var ol = 0;
		
var i;
//Sucht alle Overlay-knoten
for(i = 0;i<document.body.getElementsByClassName("style-scope ytd-thumbnail").length;i++) {
	if(document.body.getElementsByClassName("style-scope ytd-thumbnail")[i].id == "overlays") {
		cc+= newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].children.length;
                //wenn gefunden, merke aktuelle anzahl children
		p.textContent += "(" + newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].children.length + ">";
                //Füge neue Node ein
		newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].appendChild(testNode);
                //Prüfe nochmal anzahl children
		p.textContent += newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].children.length + ")";
		ol++;
	}
}
p.textContent += cc + "/" + ol;

//nochmal überprüfen, ob die anzahl children noch gleich ist
for(i = 0;i<newBody.getElementsByClassName("style-scope ytd-thumbnail").length;i++) {
	if(newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].id == "overlays") {
		
		p.textContent += " ," + newBody.getElementsByClassName("style-scope ytd-thumbnail")[i].children.length;
		
	}
}
newBody.appendChild(p);
//body ersetzen
document.body = newBody;

Die Ausgabe habe ich einfach als paragraphen am Ende des html-quellcodes angehängt:

 Spoiler

(1>2)(1>2)(1>2)(1>2)(1>2)(2>3)(1>2)(1>2)(1>2)(1>2) (1>2)(1>2)(1>2)(1>2)(3>4)(1>2)(1>2)(1>2)(1>2)(3>4) (1>2)(1>2)(2>3)(1>2)(3>4)(1>2)(1>2)(1>2)(1>2)(1>2) (3>4)(1>2)(1>2)(1>2)(3>4)(2>3)(1>2)(1>2)(1>2)(1>2) (1>2)(3>4)(1>2)(1>2)(1>2)(3>4)(1>2)(1>2)(3>4)(1>2) (1>2)(1>2)(1>2)(1>2)(3>4)(3>4)(1>2)(1>2)(2>3)(3>4) (2>3)(1>2)(1>2)(3>4)(1>2)(3>4)(3>4)(1>2)(3>4)(1>2) (1>2)(1>2)(1>2)(1>2)(1>2)(1>2)(1>2)(1>2)(1>2)(1>2) (3>4)(2>3)(3>4)(1>2)(1>2)(2>3)(2>3)(1>2)(1>2)(2>3) (1>2)(1>2)(3>4)(1>2)(1>2)(1>2)(1>2)(1>2)(1>2)144/99 ,1 ,1 ,1 ,1 ,1 ,2 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,3 ,1 ,1 ,1 ,1 ,3 ,1 ,1 ,2 ,1 ,3 ,1 ,1 ,1 ,1 ,1 ,3 ,1 ,1 ,1 ,3 ,2 ,1 ,1 ,1 ,1 ,1 ,3 ,1 ,1 ,1 ,3 ,1 ,1 ,3 ,1 ,1 ,1 ,1 ,1 ,3 ,3 ,1 ,1 ,2 ,3 ,2 ,1 ,1 ,3 ,1 ,3 ,3 ,1 ,3 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,3 ,2 ,3 ,1 ,1 ,2 ,2 ,1 ,1 ,2 ,1 ,1 ,3 ,1 ,1 ,1 ,1 ,1 ,1

Fazit: er fügt den Knoten richtig ein, (children wachsen jeweils von 1auf2 usw) aber bei einer späteren überprüfung weiter unten sind sie wieder wie vorher. (die 144/99 sind cc und ol)

Wahrscheinlich habe ich das alles zu kompliziert geschrieben, aber vielleicht steigt ja einer durch und kann mir sagen, was ich falsch mache.

Viele Grüße!