# Affecting Elements

jQuery has many different methods for affecting elements.

***

## .text()

#### Sets new text on an element

```javascript
$(".hero-heading").text("Hello");
```

#### Gets the current text of an element

```javascript
let heroHeadingText = $(".hero-heading").text();
```

 

***

## .addClass()

Adds a class to an element.

```javascript
$(".card").addClass("is-active");
```

Note: period not added before is-active because .addClass already indicates that we're passing in a class name.

***

## .removeClass()

Removes a class from an element

```javascript
$(".card").removeClass("is-active");
```

***

## .toggleClass()

Adds a class if that class is not already on the element. Removes a class if that class is already on the element.

```javascript
$(".card").toggleClass("is-active");
```

***

## .hasClass()

Returns true or false based on if an element has a certain class

<pre class="language-javascript"><code class="lang-javascript">let menuButton = $(".menu-button");

menuButton.on("click", function () {
    menuButton.toggleClass("is-opened");
<strong>    if ( menuButton.hasClass("is-opened") ) {
</strong>        menuButton.text("Close Menu");
    } else {
        menuButton.text("Open Menu");
    }
});
</code></pre>

&#x20;

***

## .val()

#### Gets the value of a form field

```javascript
let fieldValue = $(".form-field").val();
```

#### Sets a value on a form field

```javascript
$(".form-field").val("New Value");
```

#### Clears the value of a form field

```javascript
$(".form-field").val("");
```

***

## .remove()

Deletes an element entirely from the page

```javascript
$(".element-class").remove();
```

***

## .appendTo()

#### Moves cta-card into the cms-list as the last child

```javascript
$(".cta-card").appendTo(".cms-list");
```

#### Moves cta-card into the cms-list as the last child using variable

```javascript
let cmsList = $(".cms-list");
$(".cta-card").appendTo(cmsList);
```

#### Makes a copy of cta-card and adds the copy as the last child of cms-list

```javascript
$(".cta-card").clone().appendTo(".cms-list");
```

#### Creates a new div with class of "cta-card" and adds it as the last child of "cms-list"

```javascript
$("<div class='cta-card'></div>").appendTo(".cms-list");
```

***

## .prependTo()

#### Moves cta-card into the cms-list as the first child

```javascript
$(".cta-card").prependTo(".cms-list");
```

***

## .insertBefore()

Moves the cta-card to be right before the third cms-item

```javascript
$(".cta-card").insertBefore(".cms-item:nth-child(3)");
```

***

## .insertAfter()

Moves the cta-card to be right after the third cms-item

```javascript
$(".cta-card").insertAfter(".cms-item:nth-child(3)");
```

***

## .css()

Get or set the value of any css variable or css property like height, background-color, border-width, etc.

#### Gets the background color of the hero

```javascript
let heroBackground = $(".hero").css("background-color");
```

#### Sets the background color of the hero

```javascript
$(".hero").css("background-color", "#000");
```

#### Gets the value of the --swatch--brand css variable on the html element

```javascript
let brandColor = $("html").css("--swatch--brand");
```

#### Sets the value of the --swatch--brand css variable on the html element

```javascript
$("html").css("--swatch--brand", "red");
```

***

## .attr()

Gets or sets the value of any attribute

#### Gets the href (url) on a link

```javascript
let myUrl = $(".my-link").attr("href");
```

#### Sets the href (url) on a link

```javascript
$(".my-link").attr("href", "https://www.google.com/");
```

#### Gets the source (url) of an image

```javascript
$(".my-image").attr("src");
```

#### Sets the source (url) of an image

```javascript
$(".my-image").attr("src", "https://www.your-website.com/person.jpg");
```

{% hint style="info" %}
When using this, select the image in Webflow and ensure the "Disable responsiveness" checkbox is turned on. Otherwise multiple image sources will be generated for each screen size.
{% endhint %}

#### Get the arial-label of an element

```javascript
let initialLabel = $(".my-button").attr("aria-label");
```

#### Set the arial-label of an element

```javascript
$(".my-button").attr("aria-label", "Play Video");
```

#### Get the value of a custom data attribute

```javascript
let attributeValue = $(".my-element").attr("attribute-name");
```

#### Set the value of a custom data attribute

```javascript
$(".my-element").attr("attribute-name", "attribute-value");
```

***

## .removeAttr()

Deletes an attribute and its value completely from an element

```javascript
// removes all inline styles created on an element
$(".my-element").removeAttr("style");
```

***

## .click()

Causes a click on an element

```javascript
$(".my-element").click();
```

{% hint style="info" %}
If the element is a link, \[0] is needed because only one link can be clicked at a time.

```
$(".my-link")[0].click();
```

{% endhint %}

***

## .clone()

#### Makes a copy of an element

```javascript
// Create new element
let newElement = $(".my-element").clone();
// Do things to the cloned element
newElement.addClass("is-featured");
// Add new element to the page
newElement.appendTo("body");
```

#### Shortened version

```javascript
$(".my-element").clone().addClass("is-featured").appendTo("body");
```

***

## .html()

#### Gets the html inside an element

```javascript
let elementContent = $(".my-element").html();
```

#### Replaces the html inside an element

```javascript
$(".my-element").html("<div class='my-class'>Some text</div>");
```

#### Clears out the html inside an element

```javascript
$(".my-element").html("");
```

***

## .empty()

Deletes everything inside an element

```javascript
$(".my-element").empty();
```

***

## .wrap()

Wrap something around an element. New div with the class of "container" gets wrapped around my-element

```javascript
$(".my-element").wrap("<div class='container'></div>");
```

***

## .unwrap()

Deletes the direct parent of an element without deleting any of that parent's children

```javascript
$(".my-element").unwrap();
```

***

## .replaceWith()

Deletes element and replaces it with something else

#### Replace with existing element

The hero-card will be deleted and the footer-form will be moved to where the .hero-card was.

```javascript
$(".hero-card").replaceWith( $(".footer-form") );
```

#### Replace with new element

The hero-card will be deleted, and a new h2 will be created in its place.

```javascript
$(".hero-card").replaceWith("<h2 class='my-heading'>New heading</h2>");
```

***

## .prop()

Gets or sets the value / state of a form element

{% hint style="info" %}
When using a custom checkbox style, Webflow hides the real checkbox input and adds a div styled like a checkbox in its place.
{% endhint %}

#### Sets checkbox to checked

```javascript
// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to true
checkboxParent.find("input").prop("checked", true);
// find the visible checkbox div and add Webflow's checked class to it
checkboxParent.find(".w-checkbox-input").addClass("w--redirected-checked");
```

#### Sets checkbox to unchecked

```javascript
// get your checkbox's parent
let checkboxParent = $(".my-checkbox-parent");
// find the hidden input and set it to false
checkboxParent.find("input").prop("checked", false);
// find the visible checkbox div and remove Webflow's checked class from it
checkboxParent.find(".w-checkbox-input").removeClass("w--redirected-checked");
```

#### Get value of checkbox

```javascript
let isChecked = $(".my-checkbox-parent").find("input").prop("checked");
```

#### Get state of checkbox

```javascript
let isDisabled = $(".my-checkbox-parent").find("input").prop("disabled");
```

***

## .height()

#### Get the height of an element

```javascript
let elementHeight = $(".my-element").height();
```

#### Set the height of an element

```javascript
$(".my-element").height("2rem");
```

{% hint style="info" %}
This can also be done with .css("height") and .css("height", "2rem")
{% endhint %}

***

## .width()

#### Get the width of an element

```javascript
let elementWidth = $(".my-element").width();
```

#### Set the width of an element

```javascript
$(".my-element").width("2rem");
```

***

## .show()

Sets element to display block

```javascript
$(".my-element").show();
```

{% hint style="info" %}
Can also be done with .css("display", "block")
{% endhint %}

***

## .hide()

Sets element to display none

```javascript
$(".my-element").hide();
```

***

## .toggle()

Switches between display none and the original display setting

```javascript
$(".my-element").toggle();
```

***

## .focus()

Causes a focus on an element

<pre class="language-javascript"><code class="lang-javascript">$(".open-modal-button").on("click", function () {
<strong>    $(".name-field").focus();
</strong>});
</code></pre>

***

## .blur()

Causes a focus off of an element

<pre class="language-javascript"><code class="lang-javascript">let accessCodeField = $(".access-code-field");
accessCodeField.on("input", function () {
    // once field has 4 characters inside
    if (accessCodeField.val().length === 4) {
        // focus off of field
<strong>        accessCodeField.blur();
</strong>    }
});
</code></pre>

***

## .submit()

Causes a form to submit

```javascript
$(".my-form-element").submit();
```

{% hint style="info" %}
The \<form> element in Webflow is the direct child of the Form Block.
{% endhint %}

<div align="left"><figure><img src="/files/1MdbhAWgvWcvzgfmyBtp" alt="" width="273"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jquery.timothyricks.com/affecting-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.