per CSS oder javascript automatisch Code an div anhängen

[Auge]

Hallo

Wenn ich per Javascript ein weiteres Dummy-DIV erzeuge, wie kann ich dieses dann sicher immer an die rechte Ecke vom Helper-Div heften, da der Inhalt und damit die Größe des Helper-Divs immer variabel ist.

Vergiss im ersten Schritt (die rechte Ecke). Du willst das div an die richtige Stelle im HTML-Markup einbauen. Dazu hängst du es mit JavaScript als Kind seines Elternelements in das DOM ein. Das war Schritt 1. An welcher Stelle es dargestellt wird, regelst du wiederum mit CSS. Über einen geeigneten Selektor sprichst du das Element an und vergibst die CSS-Regeln.

Beispiel:

<!-- HTML vor dem Eingriff -->
<section>
 <h2>Bla</h2>
 <p>Blubb</p>
</section>

<!-- HTML nach dem Eingriff -->
<section>
 <h2>Bla<img /></h2>
 <p>Blubb</p>
</section>

/* CSS */
section h2 {
  position: relative;
}
section h2 img {
  position: absolute;
  right: 0;
  top: 0;
}

Die CSS-Regeln schlummern in der CSS-Datei und der zweite Block wird solange nicht benutzt, wie es keine Bilder in Überschriften der zweiten Klasse in Sektionen gibt. Wahrscheinlich wirst du mit IDs und/oder mit Klassen arbeiten müssen, um nicht ungewollt andere, gleichartig aufgebaute Elementgruppen zu beeinflussen.. Der erste Block für die Überschrift selbst legt eine Positionierung relativ zur Normalposition mit position: static; (Standardwert) fest, was ohne Angaben zu top, right, bottom oder left keinerlei Änderung der Position bewirkt. Für Kindelemente wird so aber der Bezugsrahmen (alle Werte beziehen sich auf den Kontext der Überschrift) festgelegt.

Werden aber in die Überschrift Bilder eingefügt, wird dafür der zweite Block, der deren Position festlegt, benutzt. Da das Elternelement als Bezugsrahmen für die Positionierungsangaben des Bildes herhält, klebt das Bild mit top: 0; und right: 0; in der rechten oberen Ecke der Überschrift.

Was den JavaScript-Teil betrifft, sind hier andere auskunftsfähiger als ich.

Tschö, Auge