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.

I want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');

Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");

I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.

$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

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>

Show all dropzone errors instead of one at a time [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.

Try:
$("#region_North_America").append(row_str);
using append().

Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.

Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Is there a simple Javascript command that targets another object?

I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.

You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>

This would work:
document.getElementById('one').className = 'a';

you could get the element by id with:
document.getElementById("one")