javascript does not create html element and does not add to the page

Question

I’m starting at the javascript and wanted to create html elements dynamically but when you load the page it goes blank and does not add the elements code below:

function add (){

    var texto = document.createTextNode("teste");
    var p = document.createElement("p");
    var ptexto = p.appendChild(texto);
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(ptexto);

}

Answer 1

I think you want to insert the p and not the ptexto right?

Anyway your code works, see here:

function add() {
  var texto = document.createTextNode("teste");
  var p = document.createElement("p");
  var ptexto = p.appendChild(texto);
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(ptexto);
}

add();

But I think what you want is:

function add() {
  var texto = document.createTextNode("teste");
  var p = document.createElement("p");
  var ptexto = p.appendChild(texto);
  document.body.appendChild(p);
}

add();

p {
  background-color: #eef;
  padding: 5px;
}

And in that case you don’t need textNode, you can do it like this:

function add() {
  var p = document.createElement("p");
  p.textContent = 'teste!!';
  document.body.appendChild(p);
}

add();

p {
  background-color: #eef;
  padding: 5px;
}