.val()?! ?But why?


The following program passed but notice that I didn't use the .val() function.

$(document).ready(function() {
var toAdd = $('#checkListItem');

If the var toAdd = $('#checkListItem') defines toAdd and assigns it a value equal to the HTML element with an id of checkListItem then why do we need a .val() statement?


I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of

<!DOCTYPE html>
          <title> </title>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

       |            |
     head          body

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
methods ( giving you the functionality to manipulate the Elements )


Document Object Model ( in short DOM )

       + - - - - - + - - - - - -+
       |                        |
      head                     body
       |                        |
 + - - + - - -+                 |
 |     |      |                 |
title link script               |
+ - - -+ - - - - - - - - - - - ++- - - - - +
|      |                       |           |
h2    form                    div         div
       | #checkListForm       #button      | .list
       |                                   |
     input                              [ li ]
       | =name= Attribute            =line Node's=
       |  checkListItem
    [ text ]
  =text Node=

If you use $()
you are actually using jQuery()
which is also called the jQuery-Selektor

jQuery will create a so-called jQuery Selection Object
with it's own length property
( Each property has an =associated Value= )
and the length property will have an associated number Value

This number Value represents the =number-of-HTML-Elements= found,
using the specified jQuery-Selector.
( the jQuery Selection Object will also contain all of the descendants of those HTML-Elements )

using the attribute-equals Selector

var toAdd1 = $('input[name=checkListItem]').length;

( toAdd1 equals 1, as the Selector $('input[name=checkListItem]') stands for
=all HTML-Elements with input-Tag AND name-attribute equals checkListItem= )

var toAdd2 = $('input[name=checkListItem]').val().length;

( toAdd2 equals zero 0 when the input text-Node contains no characters when #button is =clicked= )

( toAdd2 greater > zero when the input text-Node contains characters when #button is =clicked= )

To get a better feeling of the situation at hand

    //var toAdd =$('input[name=checkListItem]').val();
    var toAdd1 = $('input[name=checkListItem]').length;
    var toAdd2 = $('input[name=checkListItem]').val().length;
    "[HTML-Elements found:"+toAdd1+"] "+
    "[length input-text:"+toAdd2 +"]").appendTo('body');


Script error? Big problemo on "Append to body"
Why the result is undefined?