如何使用香草Javascript注入HTML横幅代码？

我不想在静态HTML页面上更改以下HTML代码块：

<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>

---

在不使用JQuery的情况下，我需要使用香草Javascript来实现这一点，以便在每出现5、15、30次

增量从10开始，每次出现后，下一个数字是前一个数字加上其增量再加上5

例如5、15、30、50、75、105等

我面临的另一个挑战是，我也不知道如何将数学公式转换为编码

要注入的横幅代码示例：

<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>

结果将是：

<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>

:
:
:

如何做到这一点？

试试这个；）

var wrappers=document.getElementsByClassName（'wrapper'）；
用于（包装中的变量i）
{
如果（i>9）
{
如果（i%5==0）
{
var div=document.createElement（'div'）；
div.id=‘banner’+i；
div.innerHTML=''；
wrappers[i].parentElement.insertBefore（div，wrappers[i]）；
}
}
}

要帮助您入门：

可以使用按类选择图元：

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

您可以使用将HTML注入元素后的DOM：

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>'
);

someWrapper.insertAdjacentHTML(
"追尾",，
''
);

• 使用

  [].forEach

  迭代所有

  .wrapper

  元素
• 使用

  parentNode.insertBefore

  在特定位置插入元素

var start=5，
倍数=5；
var elements=document.querySelectorAll（'.wrapper'）；
[]forEach.call（元素、函数（元素、索引）{
var elemt=''+（指数+1）+''；
var div=document.createElement（'div'）；
div.innerHTML=elemt；
附属儿童要素（第一儿童分部）；
});
var计数器=1；
[]forEach.call（元素、函数（元素、索引）{
var localIndex=指数+1；
如果（localIndex==开始）{
var toAppendHTML=''+start+'\
\
';
var divElement=document.createElement（'div'）；
divElement.innerHTML=toAppendHTML；
insertAfter（divElement.firstChild，elements[index]）；
开始+=多个*++计数器；
}
});
函数insertAfter（newNode，referenceNode）{
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}

“不使用JQuery”要求我不使用JQuery的项目选择所有横幅，迭代它们，添加一个条件以在需要时插入横幅。你试过了吗？检查，然后。我已经起草了想法、逻辑和数学，但不确定如何使用QuerySelector在上述场景中实现实际的javascript。KDX：使用Jordi指出的方法进行尝试，并向我们展示您认为缺少的地方。这并不难PYour代码按预期工作，除了我需要修改

var element=document.getElementById（'banner'+start）

使用

var element=document.createElement（'div'）创建我自己的
banner div
元素；element.id='banner'+开始。然而，另一个问题出现了，我无法理解。使用
element.innerHTML='1'工作。但是一旦我在
之后有了
，我就会得到控制台错误：
未捕获的语法错误：意外的令牌非法
。Javascript不能被使用吗？@KDX-你太接近了，不得不转义结束标记字符（
）。检查编辑..到目前为止一切正常。有没有可能调整它来设置一个限制，这样最多（不超过）创建5个
？@KDX–如果条件
我得到了逻辑，那么限制
==
，但是你能给我举个简单的例子吗？我目前正在使用
if（localIndex==start&&start）
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>'
);