试试这个;）

Question

我有以下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，我需要使用Vanilla Javascript实现这一点，以便在<div class="wrapper"></div>每次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>

如何做到这一点？

Answer 1

试试这个;）

<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

使用 [].forEach 来迭代所有.wrapper元素
使用parentNode.insertBefore在特定位置插入元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为了帮助您入门：

您可以使用document.getElementsByClassName按类选择元素：

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

您可以使用Element.insertAdjacentHTML在元素之后将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>'
);

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

3 个答案:

试试这个;）