Question

I’m trying to add a horizontal rule as the last item in a div container. I tried

<script>
var rule = '<hr />';
$('#content-nav').append(rule);
</script>

I added this code into the header.php section of my website which is added onto multiple php files using php include. But jQuery files are also added and work fine for other jQuery plugins that have been implemented.

I’m never sure where in my html js is supposed to go. Am I putting this in the wrong place? Or is there something wrong with the code?

Answer 1

As long as your script comes after the jQuery script AND after the DOM is ready (or after the element is declared, but on DOM ready is preferable) your code will work:

<script src="pathToJQuery.js" />
<script>
  $(function() {
    $('#content-nav').append('<hr />');
  });
</script>
...
<div id="content-nav">
  ...
</div>

NB in the above the $(function() { ... }); is shorthand for $(document).ready(function() {...});