0

estoy haciendo un selector de archivos en HTML junto con JS, y quiero que cuando selecciones una imagen, aparezca en un div. Eso ya esta hecho, pero ahora quiero que cuando selecciones otros archivos, se borren los que ya estaban y aparezcan los nuevos. en el JS estoy recibiendo el div asi:

$("#divPrincipal").html('<div></div>');

pero eso parece que lo unico que hace es que me mete el codigo html dentro del mismo div. ¿Hay una manera de sobreescribir el div principal?

1
  • 1
    Si se puede, con javascript vanilla se hace igualando el elemento al contenido id_elemento = '<div><div>'
    – Christian
    Commented el 10 sept. 2021 a las 17:31

2 respuestas 2

1

Hola para eso puede usar dos variantes

function cambiarElemento(){
var div =  document.getElementById('divPrincipal');
var span = document.createElement('span');
span.innerHTML = 'Span Elemento';

div.parentNode.replaceChild(span, div);
}
<div id="divPrincipal">Div Principal</div>
<button onclick="cambiarElemento();">Cambiar Elemento</button>

de esta forma con js cambiamos un elemento por otro

function cambiarElementoJQuery() {
  var span = $('<span/>', {
    'html': 'Span Elemento',
  });

  $('#divPrincipalJQuery').replaceWith(span)
}
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="divPrincipalJQuery">Div Principal</div>
<button onclick="cambiarElementoJQuery();">Cambiar Elemento</button>

y de esta forma usando jquery,

En los 2 ejemplos lo que hago es sututuirlos por un span pero puedes sustituirlo por cualquier elemento que desee Saludos

1

si se puede sobreescribir es algo asi:


//obtencion del elemento
var cajaprincipal = document.querySelector('#divPrincipal');
//sobreescritura
cajaprincicpal.innerHTML = 'codigo html que quieres agregar';

Esto sobreescribira lo que esta dentro de tu caja, el innerHTML borra todo lo que tengas dentro de tu div y te agrega lo que especificaste en el codigo anterior.

si quieres que te agregue mas codigo sin borrar el anterior solo agrega un signo de + despues de innerHTML asi:

//obtencion del elemento
var cajaprincipal = document.querySelector('#divPrincipal');
//sobreescritura
cajaprincicpal.innerHTML += 'codigo html que quieres agregar';

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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