使用链接样式附加 DIV

Question

我有数百个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>");

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

首先使用单引号，然后里面的所有内容都应该用双引号完成，反之亦然。

Answer 2

试试这个

$(".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>`);

还要确保你的脚本 src 是一个有效的 JS

Answer 3

您的.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>');`

Answer 4

如果您不想使用 Jquery 或避免插入 HTML 字符串，这可能会有所帮助。它使用vanilla 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>

Answer 5

有几个问题。 您正在尝试在双引号字符串中使用双引号，如果不转义双引号，则无法做到这一点。

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

如果要将其保留在多行上，则有几个选项。

您可以使用多个串联字符串：

$(".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';

看到区别了吗？我也没有。

如果您的目标浏览器都支持它(大多数现代浏览器都支持(，我会使用模板文字：

$(".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>

模板文本允许您使用多行字符串而不进行任何转义，您可以在其中同时使用单引号和双引号而不转义它们。它们还允许您执行其他简洁的操作，例如表达式插值和使用标记模板。

学习在浏览器中使用开发人员控制台以及 linter(如 jsHint(可以帮助发现此类错误。