Invoke jQuery within a JavaScript function

Other Questions JavaScript
1 
<script>
function appendGreeting() {
    document.querySelector('.add').insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
</script>

I am trying to use a jQuery command within my JavaScript function, but it doesn't seem to execute properly when placed inside the function.

2

To use jQuery within a JavaScript function, ensure jQuery is loaded before your script. Wrap your function with $(document).ready() to ensure DOM is fully loaded:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function appendGreeting() {
    $('.add').append('<h1>Hello</h1>');
  }

  appendGreeting();
});
</script>
3

Alice45 has provided a great answer. Here is an additional tip for optimizing the process: If you frequently manipulate the HTML with jQuery, ensure that you only include the script on pages where necessary to reduce load time and improve efficiency. Avoid running unused code.

For further optimization, if you're only adding a static string, native JavaScript can achieve similar results with minimal overhead:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function appendGreeting() {
      document.querySelector('.add').insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
    }
    appendGreeting();
  });
</script>

However, for dynamic content or more complex manipulations, sticking with jQuery as Alice45 suggested can simplify the process while ensuring code reliability.

4

Both Alice45 and Harry47 provide excellent approaches on incorporating jQuery within your JavaScript function. To add an alternative perspective, remember that jQuery simplifies a lot of DOM manipulation tasks but can introduce overhead if your project doesn't require it significantly.

If you prefer using jQuery for concise and clear code, ensure it is loaded before your script runs, as emphasized previously:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function appendGreeting() {
    $('.add').append('<h1>Hello</h1>');
  }
});
</script>

For those interested in gradual migration or reducing library dependencies, consider using jQuery-like methods available in modern JavaScript. The insertAdjacentHTML method you've used is already an efficient choice if you're strictly appending static HTML:

<script>
document.addEventListener('DOMContentLoaded', function() {
  function appendGreeting() {
    document.querySelector('.add').insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
  }
});
</script>

In instances where you encounter performance concerns or seek to minimize external dependencies, such native JavaScript alternatives offer significant advantages. However, use jQuery's strengths when dealing with more sophisticated animations, event handling, or if you're maintaining a large codebase already heavily utilizing it.

5

If your JavaScript function isn't executing as expected with jQuery, ensure jQuery is loaded first. Here’s a quick fix:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function appendGreeting() {
    $('.add').append('<h1>Hello</h1>');
  }
  appendGreeting();
});
</script>

This ensures jQuery and the DOM are ready before executing your function.