Create Web Pages that Morph Using the JQuery ReplaceWith Method

jquery replacwithSome of the most engaging Web page effects occur when one element replaces another. For example, a paragraph may seem to change into an image or a table might appear where a drop-down menu once stood. You can spend time writing JavaScript code to make this happen or save time by calling jQuery’s replaceWith method.

ReplaceWith: It Only Takes One Line of Code

A web page may contain hundreds of elements such as hyperlinks, text boxes, and headings. Because elements have top and left properties, you can move an element anywhere by changing the values of those properties. You could even move a button on top of an image if you liked.

However, this type of element manipulation is not the same as using jQuery’s replaceWith method; that method replaces an element with something else. “Something else” can be another element, an array of elements, an HTML string or a jQuery object.

You don’t need an elephant’s memory to remember the syntax of the replaceWith method. The following line of code shows how simple this method is:

$("#paragraph1").replaceWith("Replacement text");

When this code runs, the replaceWith method operates on the selector that appears after the dollar sign. A selector identifies one or more elements on a web page. In this example, the selector is “#paragraph1.” The hash symbol lets jQuery know that you want it to operate on the element with an ID of paragraph1.

Because this code passes “Replacement text” to the replaceWith method, browsers find that paragraph and replace it with “Replacement text.”

Need to learn how  jQuery selectors work? Udemy tips can help.

You can also create a text string that contains HTML and pass that to the replaceWith method, as shown below:

("#paragraph1").replaceWith("<h1>This is a Heading</h1>");

This statement replaces the paragraph with an h1 heading. This type of string replacement is ideal for constructing an HTML element in real time and using it to replace an element on your Web page. For example, you could replace a check box with a hyperlink by creating an HTML string that contains an anchor tag and passing that string to the replaceWith method.

Add More Functionality to ReplaceWith Using Functions

Another way to pass an HTML string to the replaceWith method is to use a function as an argument. That function can create the string that the replaceWith method uses in its replacement operation. The following code shows how you might pass the name of a function named myFunction to the replaceWith method:

$("#paragraph1").replaceWith(myFunction);

Assume that the myFunction method looked like the one shown below:

function myFunction() {

var htmlVal = "<h1>This is a Heading</h1>";

return (htmlVal);

}

This function creates an HTML string that defines an h1 heading. The function passes that string back to the replaceWith method. When that happens, jQuery replaces the paragraph whose ID is “paragraph1” with the h1 heading. If you need to create a complex HTML element using text, a function is an ideal place to do that.  Do not put quotes around the function name that you pass to the replaceWith method.

Working with Real Elements

JQuery allows you to replace an HTML element by passing the ID of a real element to the replaceWith method. Unlike HTML strings that create elements dynamically, real elements already reside somewhere on a Web page. Consider the statement shown below:

$("#paragraph1").replaceWith( $("#textBox1") );

This code assumes that your HTML document contains an element whose ID is “textBox1.” The syntax for passing a real element to replaceWith is a little different from  the syntax you use to pass it an HTML string. To pass an element, surround the selector with quotes. The selector in this example is the ID of the element you wish to replace. Remember that when you work with IDs, you place a hash symbol before the ID name.

Finally, you put the selector inside parenthesis and place a dollar sign before the left parenthesis. When you do this, you get the following:

$(“#textBox1”)

That becomes the argument to the replaceWith method.

Learn more about jQuery syntax from Udemy.

When your code runs, jQuery replaces the paragraph with the element with an ID of “textBox1.”  The interesting thing about this type of replacement is that the replacement element moves from its original location to the location of the element it’s replacing. If the replacement element was a text box, you’d see the paragraph disappear and your text box appear in its place. Any text in the text box would also move along with the text box.

The replacement process is similar to cloning an element. The only difference is that the object you’re replacing disappears from the Web page. If you don’t want any elements on a page to disappear, do not use the replaceWith method. Instead, use another coding technique to move an element to its desired location.

As you can see, the replaceWith method enables you to handle quite a few replacement scenarios quickly. You may also find a use for the replaceAll method. It can replace all elements of a specific type with other elements, as shown in the following example:

$("<h1>This is a Heading</h1>").replaceAll("p");

Note that the argument in the replaceAll method is the selector that represents the element you want to replace. That element is “p” in this example. The content that replaces that element resides after the dollar sign at the beginning of the statement. When this code runs, jQuery replaces all paragraphs with h1 headings.

Putting it All Together         

While making all paragraphs change into links might be fun to see, there are practical uses for replacing elements with other elements. For instance, you might want images to change to the word “Selected” when people clicked them. You could do that by giving images unique IDs and adding a click event to each image.

The click event would call a function that executed the replaceWith method. Your selector would be the ID of the image someone clicked and the replacement content could consist of an HTML string that defined a span tag, as shown below:

$("#image1").replaceWith("<span>Selected</span>");

Now that you know how to replace elements on a Web page, you’ll probably discover other ways the replaceWith method can help you create more compelling content that changes as people interact with your website. Get great tips about jQuery event handlers at Udemy.