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. Los campos obligatorios están marcados con *