Com ajuda do W3SCHOOL consegui criar esse código que insere um html através do JavaScript. Preciso também que um código específico seja mostrado se <700 e outr código seja exibido se >701. O código abaixo não funciona 100% pois quando redimensiono a janela ele não atualiza. Para funcionas 100% é preciso atualizar a página. Qual a maneira correta de utilizar Media Query com JAvascript?
<script>
function myFunction(x) {
if (x.matches) { // If media query matches
/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */
mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"</div>" +
"</div>";
var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);
} else {
/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */
mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"</div>" +
"</div>";
var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>