[JS/Greasemonkey] HTML nach einem bestimmten Element einfügen

M

MTV-King

phpBB-Profi
ID: 208117
L
21 April 2006
1.488
109
Hallo, lange war ich nichtmehr hier bei klamm, aber diese kleine Programmierer-Ecke gefällt mir, deshalb werde ich wohl wieder öfters reinschauen. Aber nun hab ich erstmal eine kleine Frage:

Ich möchte mir eine Website ein klein wenig mit Greasemonkey verändern, dazu benötige ich Javascript. Davon hab ich aber wenig Ahnung, habe schon etwas gegoogelt, aber auch nicht so wirklich das wahre gefunden.

Ich möchte nach einem bestimmten div-Container einen bestimmten HTML-Code einfügen. Den div-Container wähle ich mit document.getElementById('testid'); aus. Und für den einzufügenden Code benötige ich wahrscheinlich innerHTML. Aber das ganze logisch zu verknüpfen pack ich nicht. Wie würde dieses Script aussehen?

schonmal danke im vorraus ;)
 
wenn du nach einem Element was einfügen willst, dann ist aber innerhtml nciht so das richtige, damit fügst du ja ins Element was ein.

HTML: 
<div>hier ist das innerHTML</div>
oder wolltest du das schon da drin haben nur halt am ende dessen??

du hast:
HTML: 
<div> Aktueller Inhalt</div>
und willst?
HTML: 
<div> Aktueller Inhalt Neuer inhalt</div>
dann mußt du halt
HTML: 
document.getElementById('testid').innerHTML+=' Neuer inhalt';
nutzen

Wenn du wirklic danach was einfügen willst mußt du mit insertbefore und nextsibling arbeiten:

Infos:
https://de.selfhtml.org/javascript/objekte/node.htm#insert_before
 
Die entstrechende Stelle der Website lautet:
HTML: 
<div id="testid"><p>hier steht ein text.</p></div>

Und nun benötige ich ein Greasemonkey/JS-Script, welches mir dadrunter noch einen div-Container mit den selben Attributen, aber anderem Text erstellt.

Also so sollte es hinterher aussehen (ich weiß schon, dass sich der Seitenquelltext nicht ändert, sondern lediglich das was angezeigt wird. dieses Ergebnis hier, soll nur verdeutlichen, was der Browser hinterher anzeigen soll):
HTML: 
<div id="testid"><p>hier steht ein text.</p></div><div id="testid"><p>hier steht ein weiterer text.</p></div>
 
Dann mußt du insertbefore und nextsibling nutzen, in dem von mir geposteten lnk findest du eigentlich ausführliche Beispiele.

Eins noch dazu. Eine ID, sollte man nur einmalig auf einer Webseite nutzen!
 
Für den Tipp mit der ID schonmal danke. Ich wollte aber sowieso gar keine weitere Box haben, sondern etwas anderes. Nur zur Vereinfachung hab ich halt gesagt, es sollte ne weitere Box sein.

Der Link ist auch sehr hilfreich, allerdings bekomm ich es trotzdem noch nicht so ganz hin. Vielleicht liegt es auch an der Uhrzeit. Ich werde das morgen nachmal versuchen, aber wenn jemand so nett wäre und mir dieses kleine Script schreibt, wäre ich auch sehr dankbar *g*
 
Also, hier mein Versuch:
Code: 
var neuebox = "<div id='leftSideBox2'><div><p>Nachts ist es kälter als draußen.</p></div></div>";
document.getElementById("leftSideBox").insertBefore(neuebox, document.getElementById("leftSideBox"));

Funktioniert nicht :LOL: Bitte erschlagt mich nicht für dieses klägliche Ergebnis.
 
1. ich meine das neueBox so nicht als knoten angesehen wir.
->
var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
Zum Vergrößern anklicken....
2. insertBefore geht anders.
elternelement.insertBefore(neueselement,Kindelement)

du nutzt als eltern und als kindelement das selbe.

Wenn du das elternelement nciht hast, kannst du es dir mit parentNode erhalten.
https://de.selfhtml.org/javascript/objekte/node.htm#parent_node
 
Neues Ergebnis:
Code: 
var neuB = document.createElement("div");
var neuBText = document.createTextNode("<div><p>Nachts ist es kälter als draußen.</p></div>");
neuB.appendChild(neuBText);
var elternelement = document.getElementById("leftSideBox").parentNode;
elternelement.insertBefore(neuB, document.getElementById("leftSideBox"));

Also die 2. Box wird schonmal angezeigt. Aber Es gibt noch 2 Probleme:
1. Dem in Zeile 1 erstelltem div-Element muss noch die id zugewiesen werden. Wie geht das?
2. Der HTML-Code von neuBText wird auch als soeiner angezeigt und nicht ausgeführt. Wie mache ich das, dass der HTML-Code auch ausgeführt wird?

//Edit: Problem 1 kann ich selber lösen. Problem 2 bleibt dennoch.
 
Zuletzt bearbeitet:
Also du erzeugst ja wie du sehen solltest ein textelement, was du hinzufügst.
Wenn du html einfügen illst dann nutz einfach

Code: 
neuB.innerHTML="<div><p>Nachts ist es kälter als draußen.</p></div>";

Oder du erzeugst ein neues Div-node, dem du wiederum ein erzeugtes p-node zuweist, dem du halt den text zuweist.

da ist das innerHTML leichter/schneller.

ne id vergibst du direkt über neuB.id="meineid";
 
Das mit der ID funktioniert super, ich hatte da eine koplizierte Art gefunden, aber dein Tipp ist besser ;)

Das mit innerHTML funktioniert nicht.

// Edit: Hatte einen kleinen Denkfehler drin. innerHTML funktioniert doch. Hier das Endergebnis:
Code: 
var neuB = document.createElement("div");
neuB.id="leftSideBox2";
neuB.innerHTML="<div><p>Nachts ist es kälter als draußen.</p></div>";
document.getElementById("leftSideBox").parentNode.insertBefore(neuB, document.getElementById("leftSideBox"));
 
Zuletzt bearbeitet:
Es funktioniert. Das ist ja schonmal ganz gut. Einerseits hab ich natürlich Lust weitere Greasemonkey-Scripte zu schreiben und auch zu veröffentlichen, andererseits weiß ich noch nicht, ob ich wirklich JS lernen will :LOL:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben