per innerHTML input-feld hinzufügen [Archiv]

Sunny89

13-12-2008, 19:41

Abend,

heruntergebrochen sieht mein Code so aus --v

<html>
<head>
<script>
function asdf()
{
document.getElementById("content").innerHTML += '<input type="text">';
}
</script>
</head>
<body>
<div id="content">
<input type="text">
<input type="button" onclick="asdf();">
</div>
</body>
</html>

Ich habe ein Formular, in das ich per Knopfdruck ein input-Element hinzufügen möchte. Das funktioniert ja auch soweit. Nur leider wird der Inhalt des von Anfang an bestehenden Input-feldes beim Ausführen der Funktion gelöscht.

Ihr wisst nicht zufällig woran das liegt/wie ich das umgehen kann?

msi

14-12-2008, 16:27

Abend,

heruntergebrochen sieht mein Code so aus --v

<html>
<head>
<script>
function asdf()
{
document.getElementById("content").innerHTML += '<input type="text">';
}
</script>
</head>
<body>
<div id="content">
<input type="text">
<input type="button" onclick="asdf();">
</div>
</body>
</html>

Ich habe ein Formular, in das ich per Knopfdruck ein input-Element hinzufügen möchte. Das funktioniert ja auch soweit. Nur leider wird der Inhalt des von Anfang an bestehenden Input-feldes beim Ausführen der Funktion gelöscht.

Ihr wisst nicht zufällig woran das liegt/wie ich das umgehen kann?

das liegt daran, dass die elemente gelöscht und dann neu angelegt werden.
du kannst dir den inhalt der ersten input box zuvor merken und den wert dann wieder setzen. oder alternativ und das ist sauberer ein input Element erzeugen und dann in den DOM einbauen

Sunny89

24-12-2008, 13:35

Sooo.. erstmal Danke für deine Antwort. Da jetzt die Klausurphase rum ist, konnte ich mich auch mal wieder ein wenig mit dem Thema beschäftigen. Hab ne ganze Weile suchen müssen (wenn man in google "dom" eingibt, bekommt man ganz viele Reiseführer rund um den Kölner Dom ;) ), bis ich deinen Denkanstoß realisieren konnte.

Dieses Beispiel hier hat mir weitergeholfen

<html>
<head>
<title>||Working with elements||</title>
</head>

<script type="text/javascript">
var my_div = null;
var newDiv = null;

function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";

// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}

</script>

<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>

Also, frohe Weihnachten ;)