Creating a div using JavaScript/Dom and a textarea

Question

I have this code and it isn't working the way i want. I want it to create a new div under the other one everytime the button is clicked, but it is just changing the content of the div. help

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: red;
font-family: arial;
}
</style>
</head>
<body>

Name: <textarea id="myText" value=""></textarea>

<button type="button" onclick="myFunction()">Enviar</button>

<div id="demo"></div>

<script>
function myFunction() {
    var x = document.getElementById("myText");
    var defaultVal = x.defaultValue;
    var textoComentario = x.value;

    if (defaultVal == textoComentario) {
        alert("Digite um comentário!");
    } else {
           document.getElementById("demo").innerHTML =  "<p>" + textoComentario + "</p>";
        x.value = "";

    }
}
</script>

</body>
</html>

[`Java` != `JavaScript`](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) — Pshemo, Jul 01 '15 at 12:32
1) How does text area affect your scenario? 2) As far as I understand your question is "how to append one html element **after** other html element?" See existing answers: http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library http://stackoverflow.com/questions/7258185/javascript-append-child-after-element — Vasiliy Kevroletin, Jul 01 '15 at 12:43

score 0 · Answer 1 · answered Jul 01 '15 at 12:34

0

You can try with jquery more easily:

 $('<div/>').html(textoComentario).appendTo('#demo');

EDIT

You can make it with pure-javascript with createElement too:

http://www.w3schools.com/jsref/met_document_createelement.asp

Good luck!

answered Jul 01 '15 at 12:34

Marcos Pérez Gude

20,206
4
34
65

score 0 · Answer 2 · answered Jul 01 '15 at 12:53

I think you are looking for this:

WORKING:DEMO

HTML

NO CHANGE

CSS

NO CHANGE

JS/JQuery

function myFunction() {
    var x = document.getElementById("myText");
    var defaultVal = x.defaultValue;
    var textoComentario = x.value;
    alert(textoComentario);

    if (defaultVal == textoComentario) {
        alert("Digite um comentário!");
    } else {
           $("#demo").css("display","block");
           $("#demo").append("<p>" + textoComentario + "</p>");
        x.value = "";

    }
}

score 0 · Answer 3 · answered Jul 01 '15 at 12:54

0

Replace your

document.getElementById("demo").innerHTML =  "<p>" + textoComentario + "</p>";

into $('#demo').append("<p>" + textoComentario + "</p>");

It will work.......

answered Jul 01 '15 at 12:54

Vignesh Bala

859
6
24

Creating a div using JavaScript/Dom and a textarea

3 Answers3

EDIT