Estou buscando fragmentos de HTML
com fetch()
e adicionando ao DOM
com a função insertAdjacentHTML()
em um loop for()
... a função que realiza esta tarefa esta em uma Promise()
e do seu retorno (no caso de sucesso) uso outra função para modificar o conteúdo de partes do documento que contenham certo atributo.
O seguinte exemplo é fiel a questão:
let fragments = [
{
file: "navbar.html",
mode: "prepend",
target: "#body"
},
{
file: "modal-cookies.html",
mode: "insertAfter",
target: ".drawer-menu"
},
{
file: "footer.html",
mode: "append",
target: "#body"
}
]
//
const __DEFINE__ = () => {
return new Promise((resolve, reject) => {
let urls = [],
param = [],
len = fragments.length
for (let i = 0; i < len; i++) {
urls.push(fragments[i].file);
param.push({
mode: fragments[i].mode,
target: fragments[i].target
})
}
let fetchResource = (url, i) => {
return fetch(url).then(response => {
if ( response.ok ) {
return response.text()
}
return Promise.reject()
}).then(text => {
return text
}).catch(e => {
return Promise.reject(e)
})
}
Promise.all(urls.map(fetchResource)).then(response => {
for (let i = 0; i < response.length; i++) {
let target = document.querySelector(param[i].target)
switch (param[i].mode) {
case 'insertBefore':
target.insertAdjacentHTML('beforebegin', response[i])
break
case 'insertAfter':
target.insertAdjacentHTML('afterend', response[i])
break
case 'append':
target.insertAdjacentHTML('beforeend', response[i])
break
case 'prepend':
target.insertAdjacentHTML('afterbegin', response[i])
break
}
}
// após processar o loop "resolver"
resolve()
}).catch(e => {
reject(e)
})
})
}
//
__DEFINE__().then(() => {
// manipular o DOM após ter adicionado novos Node's
let allTargets = document.querySelectorAll('.uma-classe')
[...allTargets].forEach(item => {
//
item.innerHTML = 'Exemplo'
})
}).catch(e => {
console.error(e)
})
Aparentemente o loop foi processado e novos "Node's" foram adicionados ao DOM
más ao executar a função que modificara partes destes novos elementos por vezes ao carregar a página "parece" que os "Node's" não terminaram de ser acomodados ao DOM
e consequentemente as mudanças não são realizadas.
Dentro de Promisse.all()
como poderia checar se estes "Node's" foram completamente adicionados ao DOM
?