0

Creo un objeto/elemento mediante un DOM al pulsar un botón de tipo submit. Al pulsar el botón, llamo a una función crearDom(); en esta función creo un elemento div mediante createElement(), lo creo tantas veces pulse el botón, pero mi intención es: si pulso el botón (y ya tengo un elemento div creado anteriormente porque anteriormente pulsé el botón, borrar/actualizar/recargar este div con información nueva, no duplicarlos... sin borrarlos.

Debería utilizar el removeChild().

Pregunta: ¿Lo borro al principio si existe (¿existe algun método de DOM/Javascript como el if(exists) de Java?) o al final del método me lo cargo con el removeChild?

function crearCajaResumen(){
    //Creamos el elemento/objeto que deseamos, sea <p> o <div> o <form>, etc.
    var div = document.createElement("div");
    //DIV tiene la propiedad style, la cual permite acceder a atributos CSS. Ejemplo: div.style.width = "280px"; ...
    div.setAttribute("style", "width: 280px; height: 170px; background-color: #FE775A; float: left;");
    //Guardamos en una variable el elemento/objeto que deseamos, <body>
    //var variable = document.getElementsByTagName("etiqueta")[posicion];
    var body = document.getElementsByTagName("body")[0];
    //Añadimos al documento body un hijo llamado "div".
    document.body.appendChild(div);
    //Guardamos en una variable el elemento/objeto que deseamos, <center>
    var center = document.getElementsByTagName("center")[0];
    //Insertamos el elemento "div" antes que el "center".
    body.insertBefore(div, center);
    //Creamos un nodo de texto que agregaremos al div.
    var titulo = document.createTextNode("DATOS RESUMEN FORMULARIO:\n\n");
    //Añade un nuevo nodo al final de la lista.
    div.appendChild(titulo);

    //Declaramos un array donde guardaremos los textos seleccionados.
    var seleccionados = [];
    //Declaramos un array donde guardamos todos los elementos de tipo name=prefe.
    var preferencias = document.getElementsByName("prefe");
    //Recorremos ese array de elementos name=prefe.
    for(var i=0; preferencias[i]; ++i){
        //Si está marcada la casilla...
        if(preferencias[i].checked){
            //Agregamos al array "seleccionados" el valor de "preferencias[i]".
            seleccionados.push(preferencias[i].value); //push() --> añade elementos al final de un array en Javascript.
        }
    }

    //Añadimos un salto de línea.
    var saltolinea1 = document.createElement("br");
    div.appendChild(saltolinea1);

    //Recorremos el nuevo array "seleccionados".
    seleccionados.forEach(function(valor, index, array) {
        //Por cada "seleccionado", asignamos: salto de línea, la preferencia "p"; y ambas variables las añadimos al "div".
        var salto = document.createElement("br")
        var p = document.createTextNode(valor);
        div.appendChild(salto);
        div.appendChild(p);
    });

    //Añadimos saltos de línea.
    var saltolinea2 = document.createElement("br");
    div.appendChild(saltolinea2);
    var saltolinea3 = document.createElement("br");
    div.appendChild(saltolinea3);

    //Contamos los elementos que se han seleccionado.
    if(seleccionados.length==1)
        var contar = document.createTextNode("Has seleccionado " + seleccionados.length + " elemento."); // +contar_seleccionados()+
    else
        var contar = document.createTextNode("Has seleccionado " + seleccionados.length + " elementos."); // +contar_seleccionados()+
    //Creamos el elemento salto de línea (br). En HTML, <br/>.
    var salto = document.createElement("br");
    //Agregamos al "div" ambas variables.
    div.appendChild(contar);
    div.appendChild(salto);
}
5
  • 1
    ¿Por qué no lo creas previamente con style="display: none;" y luego lo haces visible y reemplazas si contenido? Así te ahorras incluso el código para crear el elemento. el 18 may. 2017 a las 15:58
  • el equivalente a if (exist) sería algo como if(element!=null)
    – FederHico
    el 18 may. 2017 a las 16:00
  • Mejor busca si ya existe tu elemento div de ser así solo resetea su valores así no creas ni destruyes elementos
    – Yikarus
    el 18 may. 2017 a las 16:02
  • Eso estoy buscando, un método para "buscar/si_existe el elemento "div"... con un elfse sería más que sencillo, o eso parece. La idea de @OscarGarcia sería ejemplar, muy cómoda y simple pero a la hora de poner en práctica tendré que mirar.
    – omaza1990
    el 18 may. 2017 a las 16:30
  • Ya te he puesto el ejemplo. Si no te sirve dímelo y te busco otra alternativa. el 18 may. 2017 a las 16:30

1 respuesta 1

2

Tras hablar en el chat éste ha sido el resultado que encaja mejor con sus necesidades ya que es la respuesta que más se acerca a ¿existe algun método de DOM/Javascript como el if(exists) de Java?: document.getElementById.

function mostrar(mensaje) {
  /* Buscamos un elemento cuya id sea "mensajes" */
  var mensajes = document.getElementById('mensajes');
  if (mensajes === null) {
    /* Si no existe lo creamos */
    mensajes = document.createElement('div');
    /* Le asignamos un id para poder localizarlo en un futuro y que se
        muestre en la parte inferior derecha */
    mensajes.id = 'mensajes';
    document.body.appendChild(mensajes);
  }
  mensajes.innerText = mensaje;
}

function ocultar(mensaje) {
  var mensajes = document.getElementById('mensajes');
  if (mensajes !== null) {
    mensajes.remove();
  }
}
#mensajes {
  border: 2px solid red;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
<button onclick="mostrar(Math.random())">Cambia</button>
<button onclick="ocultar()">Oculta</button>

En el ejemplo compruebo si existe previamente el <div> y si no es así lo creamos.


Versión con <div> precreado

En este ejemplo creo el <div> y lo agrego cuando se necesita y lo elimino cuando se requiere. En ningún momento pierdo rastro de él para reutilizarlo.

Cuando cambio de mensajes simplemente compruebo si tiene padre (<body>) y sólo si no lo tiene lo agrego. Al quitarlo hago igual, si no tiene padre no necesito quitarlo.

var mensajes = document.createElement('div');
/* Para que se coloque en la parte inferior derecha */
mensajes.id = 'mensajes';

function mostrar(mensaje) {
  mensajes.innerText = mensaje;
  if (mensajes.parentNode === null) {
    document.body.appendChild(mensajes);
  }
}

function ocultar(mensaje) {
  if (mensajes.parentNode !== null) {
    mensajes.remove();
  }
}
#mensajes {
  border: 2px solid red;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
<button onclick="mostrar(Math.random())">Cambia</button>
<button onclick="ocultar()">Oculta</button>


Mejora

Puedes probar a crear el elemento <div> allá donde necesites con la propiedad CSS display a none (oculto) y mostrarlo (block por ejemplo) cuando vayas a mostrar contenido en él.

Haciendo esto te ahorras el código para agregar elementos en el DOM, simplificas el código y cambiar el mensaje es tan sencillo como cambiar innerHTML o innerText del <div> existente.

Aquí tienes un ejemplo:

var mensajes = document.getElementById('mensajes');

function mostrar(mensaje) {
  mensajes.innerText = mensaje;
  /* Quitamos la clase "oculto" */
  mensajes.classList.toggle("oculto", false);
  /* Agregamos la clase "visible" */
  mensajes.classList.toggle("visible", true);
}
.oculto {
  display: none;
}
.visible {
  display: block;
}

#mensajes {
  border: 2px solid red;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
  
<div id="mensajes" class="oculto"></div>
<button onclick="mostrar(Math.random())">Pulsa</button>

7
  • Es que el ejercicio me pedía crear los elementos con DOM. Todo es a base de Javascript-DOM, nada de CSS.
    – omaza1990
    el 18 may. 2017 a las 16:31
  • De acuerdo entonces :) cambio el código. el 18 may. 2017 a las 16:33
  • Déjalo, es una alternativa más que valiosa si se pudiera usar .css; igual hay otros principantes que esa idea les sirve.
    – omaza1990
    el 18 may. 2017 a las 16:33
  • Listo el ejemplo. Espero que te sirva. el 18 may. 2017 a las 16:43
  • No creo que mi código sea tan complejo. Sólo quiero eliminarlo al inicio y volverlo a lanzarlo. Sólo con usar el "removeChild" debería bastarme, ¿no? Edito mi pregunta con código completo.
    – omaza1990
    el 18 may. 2017 a las 16:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.