如何使用Vanilla Javascript注入HTML横幅代码？ [英] How to inject HTML banner code using Vanilla Javascript?

查看：79
本文介绍了如何使用Vanilla Javascript注入HTML横幅代码？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下的HTML代码块，我不想在静态HTML页面上改变它： 

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

如果不使用JQuery，我需要使用Vanilla Javascript来动态注入横幅代码每5,15,30次出现< div class =wrapper>< / div>



增量从10开始，在每次出现之后，下一个数字是前一个数字加上其增量加上5。 5，15，30，50，75，105等

另一个挑战是我也无法弄清楚如何获得数学公式来翻译

要注入的示例横幅代码： 

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

结果如下： 

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

这怎么做？

解决方案


  • 使用 []。forEach 来迭代所有 .wrapper 元素

  • 使用 parentNode.insertBefore 在特定位置插入元素


    • $ b

    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 =123data-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 + =多个* ++计数器;}}）;函数insertAfter（newNode，referenceNode）{referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）; } 

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


    I have the following block of HTML code which I don't want to alter on a static HTML page:

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

    Without the use of JQuery, I need to have this implemented using Vanilla Javascript to dynamically inject banner code after every 5, 15, 30 occurrence of <div class="wrapper"></div>

    The increament is starting at 10, and after each occurrence, the next number is previous number plus its increment plus 5.

    eg. 5, 15, 30, 50, 75, 105, etc.

    Another challenge for me is that I also couldn't figure out how to get the mathematic formula to translate to coding.

    A sample banner code to be injected:

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

    The resulting outcome would be:

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

    How can this be done?

    解决方案

    • Use [].forEach to iterate all .wrapper elements
    • Use parentNode.insertBefore to insert Element at specific position

    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>

    这篇关于如何使用Vanilla Javascript注入HTML横幅代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆