Quiero agregar algo de código al HTML dom de acuerdo con los tamaños de pantalla. Quiero eliminar totalmente el código cuando el tamaño de la pantalla es algo en lugar de tener el código y hacer display: none . ¿Cómo puedo hacerlo?
<div id="main"> <h1>One</h1> </div> const main = document.getElementById('main'); if(window.innerWidth <= 400) { main.innerHTML = '<h2>Added By js</h2>'; } else { main.innerHTML = ''; }Simplemente use la pantalla @media de css, creo que necesita hacer esto:
h1{ display: block; } h2{ display: none; } @media screen (max-width: 400px) { h1{ display: none; } h2{ display: block; } } Al hacer esto, le dice al navegador que configure la display:none de los h1 cuando el ancho de la pantalla es superior a 400 px, también puede hacerlo con la altura.
Si quieres hacerlo con javascript, todo lo que te falta son los eventos que activarán tu código.
function yourFunction() { const main = document.getElementById('main'); if(window.innerWidth <= 400) { main.innerHTML = '<h2>Added By js</h2>'; } else { main.innerHTML = ''; } } window.onload = yourFunction; window.onresize = yourFunction;