how to add jquery on magento 2

Question

I am using Magento 2, in my case I want to add an element after another using jQuery, can anyway tell me how to it, the best practice please

For example i want to insert a div with class 'one' after another div with class 'two'

$(".one").insertAfter(".two");

thank you in advance !

• fmsthird: check this devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/…
• Msquare: try this magento.stackexchange.com/a/306834

Answer 1

To use jQuery in Magento you need to add require before using jQuery, like this:

<script>
 require([
 'jquery'
 ], function($){
 $( "<div class='one'>Test</div>" ).insertAfter( ".inner" );
 });
</script>

Here is the detail of how insertAfter works is here: https://api.jquery.com/insertafter/

#Edited

If you want to do it in js level, then you don't need require you can use this criteria to add your js.

Add your js file in app/code/Vendor/Module/view/frontend/web/js/your_js_file.js

then add requirejs-config.js in app/code/Vendor/Module/view/frontend/requirejs-config.js

content of requirejs-config.js will be:

var config = {
paths: {
 'myfile': 'Vendor_Module/js/your_js_file'
},
 shim: {
 'myfile': {
 deps: ['jquery']
 },
}
};

Now you can use any jQuery functions in your file without using require

• coding mv: can i do this by creating a folder js to declare it into the file .js ?
• Shoaib Munir: Yes you can do this
• coding mv: can you update your answer plz to see how
• Shoaib Munir: see updated answer