【问题标题】：How to inject HTML banner code using Vanilla Javascript?如何使用 Vanilla Javascript 注入 HTML 横幅代码？
【发布时间】：2016-11-24 16:41:43
【问题描述】：

我不想在静态 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>

如何做到这一点？

【问题讨论】：

"不使用JQuery"
需要我不使用 JQuery 的项目
选择所有横幅，对其进行迭代，添加条件以在需要时插入横幅。你有没有尝试过？检查querySelectorAll、forEach 和appendChild。
我已经起草了想法、逻辑和数学，但不确定如何使用 QuerySelector 对上述场景进行实际的 javascript 实现。
KDX ：尝试使用 Jordi 指出的内容，并向我们展示您认为自己遗漏了什么。这不是很难。 :P

标签： javascript html css css-selectors

【解决方案1】：

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

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>

【讨论】：

您的代码可以按预期工作，但我需要修改var element = document.getElementById('banner' + start); 以使用var element = document.createElement('div'); element.id = 'banner'+start; 创建我自己的banner div 元素。然而，另一个问题出现了，我无法弄清楚。使用element.innerHTML = '<ins data-revive-zoneid="123" data-revive-id="f123123fd4f12d4f123d12"></ins>1'; 有效。但是一旦我在</ins> 之后有了<script async src="//adserver.com/asyncjs.php"></script>，我就会收到控制台错误：Uncaught SyntaxError: Unexpected token ILLEGAL。不能用Javascript吗？
@KDX — 你离得太近了，你不得不转义结束标记字符 (<\/script>)。检查编辑..
到目前为止一切正常。是否可以对其进行调整以设置一个限制，以便最多（不超过）5 个 <div id="bannerX"> 被创建？
@KDX - 限制 === If-Condition
我明白逻辑，但你能给我看一个简单的例子吗？我目前正在使用if (localIndex == start && start <= 75)。我认为它不是那么优雅和不那么灵活。

【解决方案2】：

试试这个 ;)

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

【讨论】：

【解决方案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>'
);

【讨论】：