How can I convert a jQuery object to an Element?

Question

If I have a textarea like var textarea = $('textarea'), how can I set the value to it using the JavaScript property value, and not the jQuery property val()?

I think I need to convert textarea to a JavaScript object first, but how do I?

Answer 1

You can use the dereferencing operator, or the .get() method to "Retrieve the DOM elements matched by the jQuery object."

Examples:

txtArea[0].value = "something";

or:

txtArea.get(0).value = "something";

Answer 2

The jQuery .get() will do that for you

http://api.jquery.com/get/

Quoted:

Without a parameter, .get() returns all of the elements:

alert($('li').get());

With an index specified, .get() will retrieve a single element:

($('li').get(0));

...we can use the array dereferencing operator to get at the list item instead:

alert($('li')[0]);

Answer 3

jQuery objects are Javascript objects.

You're trying to learn about the world of pain known as raw DOM scripting.

You can write

document.getElementsByTagName("textarea")[0].value = whatever;

This will get the first <textarea> and set its value.
If you want to set values for all of them, you'll need a loop.

You can also get a raw DOM element out of a jQuery object by writing $(whatever)[0].

Answer 4

You can pull the HTMLElement using array notation:

$('textarea')[0].value

...will get the value of the first element in the $('textarea') jQuery list.

Answer 5

We can use javascript's querySelector() function to get a standard javascript DOM object.

Example :

<ul id="category"><li><label><input data-id="1" data-label="CBSE" data-filterClass="category" name="category" type="checkbox"> CBSE </label></li>

console.log(document.querySelector('input[data-id="1"]'));

You will get javascript DOM object for given selector.