We Keep Coding

dynamically added input element doesn't return value in script

After adding dynamically input element (with class "dateValidation") inside static div ( with class "workItems") I use this to provide onclick function:
$(".workItems").on("click", ".dateValidation", function()
{...});
and when I in function above run f.e
alert(this);
I get: [object HTMLInputElement] (I think it's good)
but, when I run:
alert(this.val());
alert(this.hasClass("dateValidation"));
Nothing happens. What is wrong with this code? How Can I get f.e value of this input element?

this is a DOM element, you need to convert it to jquery element before running jquery functions on it
alert($(this).val());
alert($(this).hasClass("dateValidation"));

Use $(this).val() and $(this).hasClass("dateValidation"); instead of this.

this is the DOM object, whereas $(this) is the jQuery wrapper.
Using this, you can call DOM methods/attributes but not jQuery methods. And when using $(this), you can call jQuery methods not DOM methods.
In your case you're trying to access the jQuery method val() using DOM object this which is wrong. So you've to use jQuery methods using jQuery wrapper $(this).
Updated script would be like this.
alert($(this).val());
alert($(this).hasClass("dateValidation"));
Hope this will help to you find issue !!

Is exists way to combine creation of html element and appening to target?

I often see code like:
var element = document.createElement('div');
$(element).appendTo([other element here]);
Is exists way to combine these two operations? And write something like:
[other element here].createElement('div');

Yes.
$(element).append('<div id="myNewElement"></div>')

You can use:
$('div').appendTo([other element here]);

Seems you're looking for:
$otherElement.append(document.createElement('div'));
Or have jQuery create the div
$otherElement.append($('<div />'));
In the above examples $otherElement is your existing jQuery object. Replace with a selector if needed e.g $('#otherElement').

Seeing as you tagged the question with jQuery, yes jQuery has the append() and appendTo() functions.
Using append() :
$(element).append('<div></div>');
Using appendTo() :
$('<div></div>').appendTo(element);

How to define element without ID?

I have an element in CSS. I'm using:
ul.bjqs-controls.v-centered {to add style to it}
But in JS I need to define it and I don't have and Id, the only way to define is ul.bjqs-controls.v-centered.
I'm new in JS.
Should I use getElementById? Or what?
EDIT:
I'm trying to use jquery, but it's first time I use it, I'm trying to change element's (ul.bjqs-controls.v-centered) width to window width on page resize, but it doesn't seem to work :/
$(window).resize(function() {
$("ul.bjqs-controls.v-centered").width()=$(window).width();
});

getElementsByClassName("classname") will return a nodeList. You can loop in it and reach item what you want.

Please have a look at http://api.jquery.com/category/traversing/tree-traversal/
You can find the element by using other identified elements or using classes as people mentioned above.

you can use jquery like below
$(".ul.bjqs-controls.v-centered").html()
like that

Jquery each replace innerHtml

Jquery
I am trying to change the inner text on multiple td element which I believe should look something like this although this does not appear to be a jquery object when I am debugging (I could be wrong).
What is the correct way this should be done?
$('.leg-number').each(function () {
this.html('foo');
});

Maybe try this instead:
$('.leg-number').html('foo');
which is a shorter and more efficient way to achieve your goal. It is just asking jQuery to set the inner html of every element with class "leg-number" to "foo" without any explicit iteration. Most of the jQuery methods like .html() can work on sets of elements so you don't really need to use .each() for simple cases like this.
Now on why your version didn't work: Using .each() would work if you wrapped this with the jQuery function $() so you could use the jQuery methods on it:
$('.leg-number').each(function () {
$(this).html('foo');
});
The variable this inside of the .each() callback is a DOM element and you need $(this) to convert it into a jQuery object that wraps this element. See the explanation in the answer by epascarello who explained it before I updated my answer.

Read the docs for each(). this is a DOM Html Element node, not a jQuery object reference. You can either convert it back to jQuery or use innerHTML directly.
$(this).html('foo');
or
this.innerHTML = 'foo';
The docs show using $(this) in the examples.

Change:
this.html('foo');
to:
$(this).html('foo');
You're attempting to use a jQuery method on a non-jQuery object. This of course assumes that your table cells have the class .leg-number.

jQuery: Finding the number of attributes an element has

Suppose I have the xml element
<fruit color="blue" taste="sweet" shape="round"></fruit>
Without jQuery, I could use
fruit.attributes.length
How do I do this with jQuery?

Using jQuery, you'd simply retrieve the DOM element using get(index) or [index] from the jQuery object:
$('someSelector').get(0).attributes.length;
$('someSelector')[0].attributes.length;
jQuery does not provide a wrapper around this native DOMElement property.

I don't think jQuery has a way of doing that. You can do it without jQuery.
$('fruit')[0].attributes.length