Develop Reference

I can't put external javascript inside a div

I've got some pretty simple HTML, a photo and some text but I want to put a javascript element between them. This element is a countdown timer and can be inserted using external javascript.
I have a codepen with the HTML, inline css, and javascript here: https://codepen.io/thomaskwelker/pen/xjwQPj
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer">
<script src="js/kanye.js"></script>
</div>
<div class="kanye-link">
See why
</div>
</div>
I've done hours of Googling and trying things. Could some please tell me how I can get the javascript timer inside the "kanye-timer" div?

Instead of $(document.body).append($r.cvs);, try $('.kanye-timer').append($r.cvs);
This tells the JS to append the timer to the div, rather that just placing it at the end of the document

Your initialization code creates a canvas object that is never attached to any DOM document. The JavaScript snippet doesn't have to be included in line. But you can have a container where you want the canvas to be:
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer" id="timercontainer">
</div>
<div class="kanye-link">
See why
</div>
</div>
<script src="js/kanye.js"></script>
Now within your kanye.js, write something like this:
document.getElementById('timercontainer').appendChild($r.cvs);
Of course this is not portable code. Once you make it work you can externalize the container ID as a parameter.

open div tag and close it in another place by javascript

is it possible by using JavaScript to open any tag, for example div#js and insert closing tag in any place I want, like on example below?
<div id="first"></div>
<div id="js">
<div id="second"></div>
<div id="third"></div>
</div>
<div id="fourth"></div>

If you start with:
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
and need to get this structure:
<div id="first">1</div>
<div id="js">
<div id="second">2</div>
<div id="third">3</div>
</div>
<div id="fourth">4</div>
the you can use $('#second').wrap('<div id="js"></div>').after($('#third')).
See demo below:
$('#second').wrap('<div id="js"></div>').after($('#third'));
#js {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>

As you've tagged your code jQuery, I'll answer it in that sense. If you're programmatically inserting a div element into the page with juery, like this:
var bodyEl = $("body");
var myJsEl = $("<div>").attr("id", "js");
bodyEl.append(myJsEl);
... As has been noted, the $("<div>") code is the functional equivalent of document.createElement("div"), which creates the code block, both opening and closing the DOM element. Thus, when I create the element by either approach, programmatically speaking, the close is not something I can control.
That said, in the "bad old days" of document.write(), we did have the option of hard-coding opening tags and neglecting to include closing tags. DON'T DO THIS! It's deprecated, it's bad form and it can create serious coding issues later.

Is right to use getElementById(id) after change the DOM using jQuery?

In order to understand my question look at the following example code:
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
$('#object') works always!
document.getElementById("object") will work if I change the DOM structure before?
$('#there').append( $('#object') );
document.getElementById("object") // will work?

Yes, it will work.
For getElementById to return DOM of element there is only need and that is Element should be on document it dosen't matter where it is.

It will work. See this code.
jQuery is not a language, it is just a JavaScript plugin and it make use of available functions in JavaScript.
console.log($('#object')[0]);
console.log(document.getElementById("object"));
$('#there').append( $('#object') );
console.log(document.getElementById("object"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>

Move a DOM element whilst still keeping it in its own container

I want to move a DOM element inside the DOM but whilst still keeping it in its own container.
Take the following HTML:
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>
I want to put the .bit containing A to the end of this list, just below E whilst still keeping it inside the div .contain.
I have tried the following:
$('.contain').find('bit').first().appendTo('.contain');
and:
$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last());
And neither of them work.
I have very little control over the HTML. For example I can't give each .bit its own unique ID.
Can someone explain what I am doing wrong?

Just append it to the same container and A is moved to the end of the list.
Your two attempts works - you have missed the . for the find('.bit') part.
See demo below:
$('.contain').append($('.contain .bit:first-child'));
// the below works too
// $('.contain').find('.bit').first().appendTo('.contain');
// and even this works
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>

You need to use the class selector ., which you already use for .contain
$('.contain').find('.bit').first().appendTo('.contain');
working snippet:
$('.contain').find('.bit').first().appendTo('.contain');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
<div class="bit">A</div>
<div class="bit">B</div>
<div class="bit">C</div>
<div class="bit">D</div>
<div class="bit">E</div>
</div>

jQuery Remove Closest Issues in Chrome

Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/

The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.