# 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 
let menuButton = $(".menu-button");

menuButton.on("click", function () {
    menuButton.toggleClass("is-opened");
    if ( menuButton.hasClass("is-opened") ) {
        menuButton.text("Close Menu");
    } else {
        menuButton.text("Open Menu");
    }
});
*** ## .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 $("
").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("
Some text
"); ``` #### 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("
"); ``` *** ## .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("

New heading

"); ``` *** ## .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 
$(".open-modal-button").on("click", function () {
    $(".name-field").focus();
});
*** ## .blur() Causes a focus off of an element 
let accessCodeField = $(".access-code-field");
accessCodeField.on("input", function () {
    // once field has 4 characters inside
    if (accessCodeField.val().length === 4) {
        // focus off of field
        accessCodeField.blur();
    }
});
*** ## .submit() Causes a form to submit ```javascript $(".my-form-element").submit(); ``` {% hint style="info" %} The \
element in Webflow is the direct child of the Form Block. {% endhint %}