Come iniettare codice banner HTML usando Vanilla Javascript?

Ho il seguente blocco di codice HTML che non voglio modificare su una pagina HTML statica:

Senza l’uso di JQuery, ho bisogno di implementarlo usando Vanilla Javascript per iniettare dynamicmente il codice banner dopo ogni occorrenza 5, 15, 30 di

L’aumento inizia a 10 e dopo ogni occorrenza, il numero successivo è il numero precedente più il suo incremento più 5.

per esempio. 5, 15, 30, 50, 75, 105, ecc.

Un’altra sfida per me è che non riesco nemmeno a capire come ottenere la formula matematica per tradurre in codice.

Un esempio di codice banner da iniettare:

 

Il risultato risultante sarebbe:

 
: : :

Come si può fare?

  • Utilizzare [].forEach per ripetere tutti .wrapper elementi .wrapper
  • Usa parentNode.insertBefore per inserire Element nella posizione specifica
 var start = 5, multiple = 5; var elements = document.querySelectorAll('.wrapper'); [].forEach.call(elements, function (elem, index) { var elemt = '' + (index + 1) + ''; var div = document.createElement('div'); div.innerHTML = elemt; elem.appendChild(div.firstChild); }); var counter = 1; [].forEach.call(elements, function (elem, index) { var localIndex = index + 1; if (localIndex == start) { var toAppendHTML = '
'+start+'\
'; var divElement = document.createElement('div'); divElement.innerHTML = toAppendHTML; insertAfter(divElement.firstChild, elements[index]); start += multiple * ++counter; } }); function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); }
 

Prova questo 😉

 

Per aiutarti a iniziare:

È ansible utilizzare document.getElementsByClassName per selezionare gli elementi per class:

 var wrappers = document.getElementsByClassName('wrapper'); 

È ansible utilizzare Element.insertAdjacentHTML per iniettare HTML nel DOM dopo un elemento:

 someWrapper.insertAdjacentHTML( 'afterend', '
' );