[英]Using append() from Jquery outside the HTML document
I am trying to use Jquery in a separate .JS file since keeping all JavaScript code out of the HTML document will increase the performance of loading the HTML document. 我试图在单独的.JS文件中使用Jquery,因为将所有JavaScript代码保留在HTML文档之外会提高加载HTML文档的性能。
For this example I am using "index.html" and "main.js" 对于此示例,我使用“ index.html”和“ main.js”
Below is index.html: 以下是index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="testJS/main.js"></script>
</head>
<body>
<p>I would like to say: </p>
<!-- CODE BELOW MUST BE REMOVED FROM THIS DOCUMENT -->
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
</body>
</html>
I would like to cut the code from the html and insert it into main.js however the example below did not work for me: 我想从html剪切代码并将其插入main.js,但是以下示例对我不起作用:
main.js: main.js:
p.append( "<strong>Hello</strong>" );
I've also tried this with no success: 我也尝试过此方法,但没有成功:
$( "p" ).append( "<strong>Hello</strong>" );
How could I fix this and what is the difference between having JavaScript inside and having it inside a .js file? 我该如何解决这个问题,将JavaScript放入.js文件中又有什么区别?
You need to add the code in dom ready handler, because other wise when the code is executed the p
element is still not added to the dom - it is because since the main.js
is added before the p
element in your markup, but anyway the safest option is to use dom ready handler for dom manipulation 您需要将代码添加到dom ready处理程序中,因为否则,在执行代码时,仍不会将
p
元素添加到dom中-这是因为因为main.js
是在标记中的p
元素之前添加的,但是无论如何最安全的选择是使用dom ready处理程序进行dom操作
jQuery(function($){
$( "p" ).append( "<strong>Hello</strong>" );
})
I would suggest the use of the $( document ).ready()
function that JQuery provides something like this: 我建议使用JQuery提供的
$( document ).ready()
函数:
$(document).ready(function() {
$("p").append( "<strong>Hello</strong>" );
});
Here you can find more info: http://learn.jquery.com/using-jquery-core/document-ready/ 在这里您可以找到更多信息: http : //learn.jquery.com/using-jquery-core/document-ready/
When using external js you must wrap your code in document ready function like this 使用外部js时,您必须将代码包装在这样的文档就绪函数中
$(function(){
$('p').append('<strong>Hello</strong>');
});
*Note - $(function(){
is shorthand for $(document).ready(function(){
*注意-
$(function(){
是$(document).ready(function(){
As explained by Arun P Johny, the problem is that the js code is executing before the DOM elements it depends on are ready. 正如Arun P Johny解释的那样,问题在于js代码在其所依赖的DOM元素就绪之前就已在执行。
Another solution is to change your external file so that it defines a function, which you would then call at the end of the body in your html file. 另一种解决方案是更改外部文件,以便它定义一个函数,然后在html文件的正文末尾调用该函数。
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="testJS/main.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
writeText();
</script>
</body>
</html>
<!-- main.js -->
function writeText(){
$( "p" ).append( "<strong>Hello</strong>" );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.