用链接样式附加DIV

时间:2018-09-16 10:52:59

标签: javascript jquery html css

我有数百个HTML页面,我想为其添加一个带有链接和样式的新div,但是编辑每个页面会花费很多时间。

所有页面都有一个通用的JavaScript文件。

如何在div以下添加或添加所有页面?

<div  style="background-color:#561D1B;" id="testid">
    <marquee style="background-color:#561D1B;height:19px;"><script src="https://testurl.com/test" type="text/javascript" ></script></marquee>
    </div>

avoid-fout是一个类,我尝试添加下面的代码,但是它不起作用。

$(".avoid-fout").append("<div  style="background-color:#561D1B;" id="testid">
    <marquee style="background-color:#561D1B;height:19px;"><script src="https://testurl.com/test" type="text/javascript" ></script></marquee>
    </div>");

5 个答案:

答案 0 :(得分:1)

附加时,请确保遵守单引号和双引号的用法,如下所示

$(".avoid-fout").append('<div style="background-color:#561D1B;" id="testid">
<marquee style="background-color:#561D1B;height:19px;"><script src="https://testurl.com/test" type="text/javascript" ></script></marquee>
</div>');

首先使用单引号,然后使用双引号完成所有内容,反之亦然。

答案 1 :(得分:1)

尝试

[]

还要确保您的脚本src是有效的JS

答案 2 :(得分:0)

您的.append调用将不起作用,因为您要在字符串后加上双引号,并且还要在html中使用双引号。最简单的解决方法是对HTML字符串使用单引号:

$(".avoid-fout").append('<div  style="background-color:#561D1B;" id="testid">
<marquee style="background-color:#561D1B;height:19px;"><script src="https://testurl.com/test" type="text/javascript" ></script></marquee>
</div>');`

答案 3 :(得分:0)

如果您不想使用Jquery或避免插入HTML字符串,这可能会有所帮助。它使用香草JS dom API。如果您需要添加其他任何内容,可以修改方法appendToElem

        function appendToElem(elem) {
            if (!elem) {
                console.error(elem)
            }
            var script = document.createElement('script')
            script.setAttribute("src", "https://testurl.com/test")
            script.setAttribute("type", "text/javascript")

            var marquee = document.createElement('marquee')
            marquee.style.backgroundColor = "#561D1B"
            marquee.style.height = "19px"
            marquee.appendChild(script)

            var div = document.createElement("div")
            div.id = "testid"
            div.style.backgroundColor = "#561D1B"
            div.appendChild(marquee)

            elem.appendChild(div)
        }
        appendToElem(document.getElementsByClassName('avoid-fout')[1])
    <div class="avoid-fout">
        <h2>Some Random title</h2>
        <p>Some Text</p>
    </div>
    <div class="avoid-fout">
        <h2>Add At the end of this container</h2>
        <p>
            Add the asked div, with marquee and script below this. 
        </p>
    </div>

答案 4 :(得分:0)

有两个问题。您试图在双引号字符串中使用双引号,但是如果没有escaping双引号,您将无法做到这一点。

"This is "not" a valid string";
"This \"is\" a valid string";

我通常使用的一种简单解决方案是仅使用单引号将HTML封装起来,而在HTML中仅使用双引号:

'<div id="double-quotes-work-here">Just can\'t use unescaped single-quotes</div>';

另一个问题是您正在尝试使用跨越多行的字符串。 JS中的单引号和双引号字符串通常不能包含任何换行符。在这种情况下,您只是插入HTML而换行实际上并不重要,最简单的操作就是删除换行,并将所有HTML包含在一行中。

$(".avoid-fout").append('<div  style="background-color:#561D1B;" id="testid"> <marquee style="background-color:#561D1B;height:19px;">Foo</marquee> </div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avoid-fout"></div>

如果要将其保留在多行上,则有a few options

您可以使用多个串联的字符串:

$(".avoid-fout").append('<div  style="background-color:#561D1B;" id="testid">' +
'<marquee style="background-color:#561D1B;height:19px;">Foo</marquee>' +
'</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avoid-fout"></div>

或者您可以使用\来换行:

$(".avoid-fout").append('<div  style="background-color:#561D1B;" id="testid">\
<marquee style="background-color:#561D1B;height:19px;">Foo</marquee>\
</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avoid-fout"></div>

但是应该避免这种方式。这很容易出错,如果\后面有空格,则会引起语法错误;由于空白不可见,因此很难注意到。例如:

'this is a valid\
multi-line string';

'this is not a valid\ 
multi-line string';

看到区别了吗?我也不是。

如果您定位的所有浏览器都支持(most modern browser do),我将使用template literal

$(".avoid-fout").append(`<div  style="background-color:#561D1B;" id="testid">
<marquee style="background-color:#561D1B;height:19px;">Foo</marquee>
</div>`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avoid-fout"></div>

模板文字使您可以使用多行字符串而不进行任何转义,您可以在其中使用单引号和双引号而不进行转义。它们还使您可以做其他整洁的事情,例如expression interpolation和使用tagged templates

学习在浏览器中使用developer console以及诸如jsHint之类的linter可以极大地帮助发现此类错误。