• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Container per Knopfdruck erstellen

D

DerNaris

Guest
Hallo allerseits,
diese Frage bezieht sich eigentlich auf mehrere Programmiersprachen, jedoch poste ich sie hier einfach mal im HTML Bereich. Unzwar möchte ich per Knopfdruck einen Div-Container erstellen lassen, mit einer vordifinierten ID, dass man ihn mit CSS designen kann, außerdem würde ich gerne in den Container Text reinpacken, den man vorher über ein Input Feld geschrieben hat, also quasi ein Foren-Beitrags Modul, wäre sehr dankbar über Code Beispiele.
Nur habe ich entweder eine Denkblockade, oder ich bin einfach zu blöd dazu, hoffe ihr könnt mir da helfen :)

Mfg
 
Werbung:
JQuery trifft den Nagel auf den Kopf, kann aber manchmal ätzend sein.

Habe da schnell mal was zusammengebastelt:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#style{
    display:block;
    background-color:#C30;
    color:#FFF;
    width:100px;
    height:60px;
}
</style>
<script>
var my_div = null;
var newDiv = null;
function addElement () {
  var user_eingabe = document.getElementById('user-eingabe').value;// Hier der Inahlt vom Formular

// Erstellen des neuen div Elements
// und Einfügen von Inhalt
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode(user_eingabe);

  newDiv.setAttribute("id", "style");// Attribut id erstellen
  newDiv.appendChild(newContent); // Textknoten dem zuvor erstellten div hinzufügen.
 
// zum schluss das Div ausgeben
  document.body.appendChild(newDiv);
}
</script>
</head>

<body>
<div>Beim absenden wird ein div erstellt.</div>
<form name="Formular">
<textarea id="user-eingabe" cols="50" rows="10">Heir dein Inhalt den du an das div übergeben möchtest</textarea>
<input type="button" value="Absenden" onClick="addElement()">
</form>
</body>
</html>

Ist jetzt nicht der sauberste Code aber zum Verständnis ist er ok.
Allerdings ist der Code sinnlos, da nach einem neu laden der Seite wider alles weg ist.

Gruß xorg1990
 
Werbung:
Hey danke für eure Antworten, jetzt habe ich es entlich kapiert :)

Mfg
 
Zurück
Oben