How to Add jQuery cod in wordpress [duplicate]

Question

I would like to add this small jQuery code in my wordpress website but no way.

$(document).ready(function(){
$('.flex-active-slide').append('<div class="playoverlay"></div>');
});

I tried many solution on the web like

Create a js file with and call it with wp_enqueue.

<?php wp_enqueue_script("jquery-mycustom-core",'/wp-content/themes/example/mycustom.js', array('jquery'), '1.8.8'); ?>

Also i tried put it on the functions.php.

//this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script('custom_script',
'/wp-content/themes/example/mycustom.js',
array('jquery'),
'1.0' );
// enqueue the script
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Also i trid this :

add_action('wp_head', 'add_scripts');
function add_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.flex-active-slide').append('<div class="playoverlay"></div>');
});
</script>
<?php }

And i also inserted directly on the footer and the header but noway.

but when i execute this code on the browser console it work.

Any help please.

---

Thanks Alex For help so here is what i did but still didn't work

mycustom.js

j(document).ready(function(){
var j = jQuery.noConflict();
j('.flex-active-slide').append('<div class="playoverlay"></div>');
});

header.php

    <?php wp_register_script('myjs',get_stylesheet_directory_uri().'/mycustom.js',array('jquery'),false,true);
      wp_enqueue_script('myjs') ?>

Answer 1

use this:

var j = jQuery.noConflict();

now everywhere in script JQurey is needed use j instead of $ or JQuery also your enqueue line should be like this:

wp_register_script('myjs',get_stylesheet_directory_uri().'/js/my_script.js',array('jquery'),false,true);

wp_enqueue_script('myjs');

you can read more here

P.S: so your updated code should be :

mycustom.js

  var j = jQuery.noConflict();//this line Must be first line of script

j(document).ready(function(){
   j('.flex-active-slide').append('<div class="playoverlay"></div>');
});

functions.php //NOt header.php

<?php wp_register_script('myjs',get_stylesheet_directory_uri().'/mycustom.js',array('jquery'),false,true);
  wp_enqueue_script('myjs') ?>