Using append() from Jquery outside the HTML document

Question

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.

For this example I am using "index.html" and "main.js"

Below is 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:

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?

axy108 · Accepted Answer · 2013-09-19 00:07:55Z

2

I would suggest the use of the $( document ).ready() function that JQuery provides something like this:

$(document).ready(function() {
    $("p").append( "<strong>Hello</strong>" );
});

Here you can find more info: http://learn.jquery.com/using-jquery-core/document-ready/

answered Sep 19, 2013 at 0:07

axy108

5372 gold badges5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-09-19 00:06:45Z

2

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

jQuery(function($){
    $( "p" ).append( "<strong>Hello</strong>" );
})

answered Sep 19, 2013 at 0:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Milan and Friends · Accepted Answer · 2013-09-19 00:17:28Z

1

When using external js you must wrap your code in document ready function like this

$(function(){
  $('p').append('<strong>Hello</strong>');
});

*Note - $(function(){ is shorthand for $(document).ready(function(){

edited Sep 19, 2013 at 0:17

answered Sep 19, 2013 at 0:07

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

Comments

Jonathan Scoles · Accepted Answer · 2013-09-19 00:17:45Z

0

As explained by Arun P Johny, the problem is that the js code is executing before the DOM elements it depends on are ready.

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 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>" );
}

answered Sep 19, 2013 at 0:17

Jonathan Scoles

11 bronze badge

Collectives™ on Stack Overflow

Using append() from Jquery outside the HTML document

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related