Como crear un párrafo HTML en Javascript con DOM

Hola a todos, hoy os voy a explicar como crear un párrafo HTML en Javascript

Para crear elementos HTML con Javascript de forma dinámica.

Para crear un párrafo en Javascript, lo haremos de la siguiente forma:


function init() {

    let p = document.createElement("p");
    let pTexto = document.createTextNode("Ejemplo");
    p.appendChild(pTexto);

    document.body.appendChild(p);

}

window.onload = init;

Este es el resultado:

 

También podemos meterle algún estilo o clase.


function init() {

    let p = document.createElement("p");
    p.setAttribute("class", "color-red");
    let pTexto = document.createTextNode("Ejemplo");
    p.appendChild(pTexto);

    document.body.appendChild(p);

}

window.onload = init;

Tener en cuenta, que el estilo se debe agregar, en mi caso lo hago en el HTML.

Este es el resultado:

También os lo dejo como función.

 


function init() {

    let p = createP("Ejemplo");

    document.body.appendChild(p);

}

function createP(text){
    let p = document.createElement("p");
    if(text){
        let pText = document.createTextNode(text);
        p.appendChild(pText);
    }
    return p;
}


window.onload = init;

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada.