llamar - Cómo inyectar el código de banner HTML usando Vanilla Javascript?

insertar codigo javascript en html

Question

Tengo el siguiente bloque de código HTML que no quiero alterar en una página HTML estática:

<div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo02.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo03.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo04.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo05.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo06.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo07.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo08.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo09.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo10.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo11.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo12.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo13.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo14.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo15.jpg"></div>

Sin el uso de JQuery, necesito implementar esto usando Vanilla Javascript para inyectar código de banner dinámicamente después de cada 5, 15, 30 ocurrencia de <div class="wrapper"></div>

El aumento comienza en 10, y después de cada aparición, el siguiente número es el número anterior más su incremento más 5.

p.ej. 5, 15, 30, 50, 75, 105, etc.

Otro desafío para mí es que tampoco pude encontrar la forma de traducir la fórmula matemática a la codificación.

Un código de banner de muestra para ser inyectado:

<div id="banner5"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>
<div id="banner15"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>
<div id="banner30"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>

El resultado resultante sería:

<div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo02.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo03.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo04.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo05.jpg"></div>
<div id="banner5"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>
<div class="wrapper"><img class="lazyload" src="/img/foo06.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo07.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo08.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo09.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo10.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo11.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo12.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo13.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo14.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo15.jpg"></div>
<div id="banner15"><ins data-revive-zoneid="456" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>
:
:
:
<div class="wrapper"><img class="lazyload" src="/img/foo30.jpg"></div>
<div id="banner30"><ins data-revive-zoneid="789" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>

¿Cómo puede hacerse esto?

Answer 1

Prueba esto ;)

<div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo02.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo03.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo04.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo05.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo06.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo07.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo08.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo09.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo10.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo11.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo12.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo13.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo14.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo15.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo02.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo03.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo04.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo05.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo06.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo07.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo08.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo09.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo10.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo11.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo12.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo13.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo14.jpg"></div>
<div class="wrapper"><img class="lazyload" src="/img/foo15.jpg"></div>
<script>
var wrappers = document.getElementsByClassName(''wrapper'');
for(var i in wrappers)
{
if(i > 9)
{
if(i%5 == 0)
{
var div = document.createElement(''div'');
div.id = ''banner''+i;
div.innerHTML = ''<ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>'';
wrappers[i].parentElement.insertBefore(div, wrappers[i]);
}
}
}
</script>

Answer 2

Para ayudarlo a comenzar:

Puede usar document.getElementsByClassName para seleccionar elementos por clase:

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

Puede usar Element.insertAdjacentHTML para inyectar HTML en el DOM después de un elemento:

someWrapper.insertAdjacentHTML(
''afterend'',
''<div id="banner5"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins><script async src="//adserver.com/asyncjs.php"></script></div>''
);

Answer 3

• Use [].forEach para iterar todos los elementos .wrapper
• Use parentNode.insertBefore para insertar Element en una posición específica

var start = 5,
multiple = 5;
var elements = document.querySelectorAll(''.wrapper'');
[].forEach.call(elements, function (elem, index) {
var elemt = ''<span>'' + (index + 1) + ''</span>'';
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 = ''<div id="banner'' + start + ''"><ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>''+start+''/
<script async src="//adserver.com/asyncjs.php"><//script>/
</div>'';
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);
}

<div class="wrapper">
<img class="lazyload" src="/img/foo01.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo02.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo03.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo04.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo05.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo06.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo07.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo08.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo09.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo10.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo11.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo12.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo13.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo14.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>
<div class="wrapper">
<img class="lazyload" src="/img/foo15.jpg">
</div>