Difference between val() and text()

javascript

form-elements

javascript-methods

jquery

byNikita Barsukov·Oct 20, 2024

val() is your go-to when dealing with the values of form elements like <input> or <select>, while text() is your trusted friend for extracting or changing plain text inside elements like <div> or <span>. So, use val() when you need to interact with input, and text() when dealing with plain old text content.

// The secret life of user's input
var userText = $('#textBox').val();

// The unsecret life of a paragraph
var infoText = $('#info').text();

Remember, val() has a crush on inputs, while text() is more of a text nodes enthusiast.

Deep Dive

Scenarios of using `.val()`

val() just cannot resist form elements such as <input>, <select>, and <textarea>. It's super handy for:

Retrieving user's input (sort of like reading their minds 😉)
Dropping a default value (because who wants to start with a blank slate?)
Juggling with values within form fields on the fly
Spying on form data before they plan their escape (submit)

Code example: Doing magic tricks with value

// We turned you into JohnDoe, you're welcome!
$('#userName').val("JohnDoe");

Scenarios of using `.text()`

On the other hand, text() has a soft spot for elements containing textual data. It's perfect for:

Spying on textual content from elements like <p>, <div>, or <span>
Sneaking a block of text into an element
Fusing text from a set of elements into a super element

Code example: Playing Frankenstein with text

// Text assembly level = Expert
var combinedText = $('li').text();

Practical understanding

Adventures with `.val()`

Experience the thrill of using val() by diving headfirst into these scenarios:

Becoming a form data wizard
Conjuring interactive elements (dropdowns become your puppets)
Mastering the element of air, fire, and checkbox & radio values

Gotcha: `.val()` on unchecked input

Remember, .val() on an unchecked checkbox is like a non-alcoholic beer. It looks the same, smells the same, but won't give you a buzz.

Manual of `.text()`

Experience the power of .text() with these scenarios:

Creating engaging bulletin boards or news tickers
Building your own fortress of solitude with templates and placeholders
Being the hero of user interface elements like error messages

Gotcha: Stripped HTML

Remember, .text() is like a minimalist, clears out the clutter and gives you the essence, leaving you only with pure text, unfortunately, the furniture (formatting) and family photos (interactive elements) go out the window too.

Containers and their contents

Behold the kingdom of form values and the domain of visible text:

🔒 The Key to the Vault (a.k.a .val()):
    <input type="text" value="SecretCode123">
    `$('input').val();` // Mission Accomplished! You got "SecretCode123"

📖 Your Window to the World (a.k.a .text()):
    <div>Hello, Reader!</div>
    `$('div').text();` // Congrats! You deciphered "Hello, Reader!"

.val() has the power to unlock values oftentimes hidden, while .text() grants your ability to read text as you would a nighttime story.

Comparing value and textual content

🔒 Input Value: 'SecretCode123'           📖 Div Text Content: 'Hello, Reader!'
    $('input').val() --> 'SecretCode123'     $('div').text() --> 'Hello, Reader!'

Interaction vs. Static content

.val() is like the gear stick of your car, always adjusting to user interaction
.text() is like the billboard you fly past on the highway — fixed, displaying elements