per innerHTML input-feld hinzufügen

**Sunny89** · 13-12-2008, 19:41

Abend,

heruntergebrochen sieht mein Code so aus --v

Code:

<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

Zitat von Sunny89

Abend,

heruntergebrochen sieht mein Code so aus --v

Code:

<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

Code:

<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

Thema: per innerHTML input-feld hinzufügen

Themen-Optionen

Thema bewerten

Anzeige

per innerHTML input-feld hinzufügen

Lesezeichen

Lesezeichen

Berechtigungen