Query - Content

Get and set form values, text content, and HTML content.

Form Values

val

$('selector').val();
$('selector').val(value);

Gets or sets the value of form elements.

Alias value()

Parameters

Returns

• Getting: The value, or array of values for multiple elements
• Setting: Query object (for chaining)

Usage

Get

const inputValue = $('input').val();

Set

$('input').val('New value');

Example

Text Content

text

$('selector').text();
$('selector').text(content);

Gets or sets the text content of elements.

Parameters

Returns

• Getting: Combined text content of all matched elements
• Setting: Query object (for chaining)

Usage

Get

const buttonText = $('button').text();

Set

$('button').text('Click me!');

Example

textNode

$('selector').textNode();

Gets the text content of immediate text node children only. Use text() when you need all nested text content recursively.

Returns

Combined text content of immediate text node children.

Usage

<p>Hello <span>world</span></p>

$('p').text();     // "Hello world"
$('p').textNode(); // "Hello "

Example

HTML Content

html

$('selector').html();
$('selector').html(content);

Gets or sets the inner HTML of elements.

Parameters

Returns

• Getting: HTML content of the first matched element
• Setting: Query object (for chaining)

Usage

Get

const content = $('.container').html();

Set

$('.container').html('<p>New content</p>');

Example

outerHTML

$('selector').outerHTML();
$('selector').outerHTML(content);

Gets or sets the outer HTML, including the element’s own tag.

Parameters

Returns

• Getting: Outer HTML of matched element(s), or array for multiple
• Setting: Query object (for chaining)

Usage

Get

const markup = $('.card').outerHTML();

Set

$('.card').outerHTML('<section class="card">New</section>');

Example

Slots

Methods for working with slots in web components.

getSlot

$('selector').getSlot();
$('selector').getSlot(name);

Gets content assigned to slots in web components.

Parameters

Returns

Combined HTML content of elements assigned to the slot.

Usage

Default Slot

$(myComponent).getSlot();

Named Slot

$(myComponent).getSlot('header');

From Slot Element

$$(myComponent).find('slot[name="header"]').getSlot();

Example

setSlot

$('selector').setSlot(content);
$('selector').setSlot(name, content);

Sets content for slots in web components.

Parameters

Returns

Query object (for chaining).

Usage

Default Slot

$(myComponent).setSlot('<p>Main content</p>');

Named Slot

$(myComponent).setSlot('header', '<h1>Title</h1>');

Example