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>

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: stackoverflow.com/questions/4793604/… stackoverflow.com/questions/7258185/… — Vasiliy Kevroletin
– Vasiliy Kevroletin, Commented Jul 1, 2015 at 12:43

Marcos Pérez Gude · Accepted Answer · 2015-07-01 12:34:31Z

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 1, 2015 at 12:34

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

divy3993 · Accepted Answer · 2015-07-01 12:53:17Z

0

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 = "";

    }
}

answered Jul 1, 2015 at 12:53

divy3993

5,8202 gold badges30 silver badges44 bronze badges

Comments

Vignesh Bala · Accepted Answer · 2015-07-01 12:54:06Z

0

Replace your

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

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

It will work.......

answered Jul 1, 2015 at 12:54

Vignesh Bala

9199 silver badges25 bronze badges

Collectives™ on Stack Overflow

Creating a div using JavaScript/Dom and a textarea

3 Answers 3

EDIT

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related