input-Feld innerhalb von innerHTML

  • Hallo zusammen,


    ist es möglich, in innerHTML einen HTML-Tag hinzuzufügen, wie im folgenden Beispiel ein INPUT-Feld? Leider funktioniert das bei mir so nicht, könnt Ihr mir hier einen Tipp geben?


    Danke

    VG BimBiwakBier




    <!DOCTYPE html>

    <html>

    <body>


    <p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>


    <script>

    function myFunction() {

    document.getElementById("demo").innerHTML = "<input type="text" name="type" value="hallo">";

    }

    </script>


    </body>

    </html>

  • Das liegt an den doppelt und dreifach verwendeten Anführungszeichen: ". Beim zweiten Anführungszeichen gilt der String als beendet. Weil danach für js unverständlicher Code kommt (text" name="type" value="hallo">";), gibt es auch einen Error in der Konsole.


    Du kannst entweder ein Backslash ("\") vor den Anführungszeichen setzen: document.getElementById("demo").innerHTML = "<input type=\"text\" name=\"type\" value=\"hallo\">";


    Oder die anderen Anführungszeichen auf der Tastatur nutzen, die nur ein Gänzefüßchen haben:

    document.getElementById("demo").innerHTML = "<input type='text' name='type' value='hallo'>";


    Ich selbst wähle lieber die zweitere Variante, ist ordentlicher und schneller.