我有数百个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>");
附加时,请确保遵守单引号和双引号的使用,如下所示
$(".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>');
首先使用单引号,然后内部的所有内容都应该用双引号完成,反之亦然。
试试这个
$(".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
你的.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>');`
如果您不想使用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>
有几个问题。你试图在双引号字符串中使用双引号,如果没有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可以帮助发现像这样的错误。