Query - Content API reference for Query methods related to element content file-text Guide

Query - Content

Content methods in Query allow you to manipulate content accessing form data, text and html.

Value

Gets or sets the value of form elements.

Syntax

Get

$('input').value();

Set

$('input').val(newValue)
NameTypeDescription
newValueanyThe new value to set

Alias

value is also available as val

$('input').val(); // identical;

Returns

Get

Query object (for chaining).

Set

The value of the first element in the set.

Usage

Geting a Value

// Get the value of an input
const inputValue = $('input').val();
console.log(inputValue);

Setting a Value

// Set the value of an input
$('input').val('New value');

Text

Gets or sets the text content of elements.

Syntax

Get

$('p').text()

Set

$('p').text(newText)
NameTypeDescription
newTextstringThe new text content to set

Returns

Get

The combined text content of all elements in the set.

Set

Query object (for chaining).

Usage

Getting Text

// Get the text of an element
const buttonText = $('button').text();
console.log(buttonText);

Setting Text

// Set the text of an element
$('button').text('Click me!');

HTML

Syntax

Get

$('.container').html()

Set

$('.container').html(newHtml)
NameTypeDescription
newHtmlstringThe new HTML content to set

Returns

Get

The HTML content of the first element in the set.

Set

Query object (for chaining).

Usage

Getting HTML

// Get the HTML content
const containerHtml = $('.container').html();
console.log(containerHtml);

Setting HTML

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

Outer HTML

Difference from HTML Outerhtml returns the element including its own tag

Syntax

Get

$('.element').outerHTML()

Set

$('.element').outerHTML(newHtml)
NameTypeDescription
newHtmlstringThe new outer HTML content to set

Returns

Get

  • Single Element - The outer html of that element.
  • Multiple Elements - An array of outer html , one for each matched element.

Set

Query object (for chaining).

Usage

Getting Outer HTML

// Get the outer HTML
const elementOuterHtml = $('.element').outerHTML();
console.log(elementOuterHtml);

Setting Outer HTML

// Set the outer HTML
$('.element').outerHTML('<div class="new-element">Replaced content</div>');

Text Node

Versus text() text will return text content recursively of nested nodes while textNode will only return the text content of the selected node, in some cases this distinction can be essential.

Syntax

Get

$('p').textNode()

Returns

Get

The combined text content of immediate text node children.

Usage

Getting Text Node Content

// Get only the immediate text content, ignoring nested elements
const immediateText = $('p').textNode();
console.log(immediateText);

Slot Methods

Query provides two methods for working with slots in Web Components: getSlot and setSlot. These methods work on both slot elements and web component elements.

getSlot

The getSlot method gets the content of slots in Web Components.

Syntax

Get All Slotted Content
// From a component (default slot)
$(webComponent).getSlot()


// From a slot element
$(slot).getSlot()
Get Content for a Named Slot
$(webComponent).getSlot(slotName)
NameTypeDescription
slotNamestringThe name of the slot to access

Returns

The combined HTML content of all elements assigned to the slot(s).

Usage

Getting All Slotted Content
// Get all slotted content from a web component's default slot
const myComponent = document.createElement('my-component');
// ... add some slotted content ...
const allSlottedContent = $(myComponent).getSlot();
Getting Content for a Specific Slot
// Get content for just the "header" slot
const headerContent = $(myComponent).getSlot('header');
Working with Slot Elements Directly
// Get the content of a slot element
const slotContent = $(element.shadowRoot).find('slot[name="header"]').getSlot();

setSlot

The setSlot method sets the content of slots in Web Components.

Syntax

Set Content for Default Slot
$(webComponent).setSlot(content)
NameTypeDescription
contentstring or ElementThe content to add to the default slot
Set Content for Named Slot
$(webComponent).setSlot(slotName, content)
NameTypeDescription
slotNamestringThe name of the slot to add content to
contentstring or ElementThe content to add to the named slot

Returns

Query object (for chaining).

Usage

Setting Content for Default Slot
// Set content for the default (unnamed) slot
$(myComponent).setSlot('<p>Default content</p>');
Setting Content for Named Slot
// Set content for a named slot
$(myComponent).setSlot('header', '<h1>Header content</h1>');
Working with Slot Elements Directly
// Set content for a slot element (adds to parent component)
$(element.shadowRoot).find('slot').setSlot('<div>New content</div>');

Complete Component Example

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div>
        <slot name="header">Default Header</slot>
        <slot>Default Content</slot>
      </div>
    `;
  }


  // Helper to set default content if none provided
  setDefaultSlot(slotName, content) {
    // Check if slot is empty
    if (slotName) {
      if (!this.querySelector(`[slot="${slotName}"]`)) {
        $(this).setSlot(slotName, content);
      }
    } else {
      if (!this.querySelector(':not([slot])')) {
        $(this).setSlot(content);
      }
    }
  }
}


customElements.define('my-component', MyComponent);


// Usage
const component = document.createElement('my-component');
document.body.appendChild(component);


// Set header slot content
$(component).setSlot('header', '<h1>My Header</h1>');


// Set default slot content
$(component).setSlot('<p>Main content</p>');


// Get all slotted content
console.log($(component).getSlot());
Previous
Components
Next
CSS