{"id":91376,"date":"2019-09-05T14:12:08","date_gmt":"2019-09-05T19:12:08","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=91376"},"modified":"2023-06-28T19:13:13","modified_gmt":"2023-06-29T00:13:13","slug":"how-to-manipulate-dom-in-wordpress-with-jquery","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/","title":{"rendered":"Manipulating DOM in WordPress using JQuery"},"content":{"rendered":"\n

Thanks to WordPress\u2019 open-source platform<\/a> and vibrant developer community, creating themes for the platform has a pretty wide appeal. Navigating all the elements and content required to build a WordPress site can be challenging, however, depending on your programming knowledge and experience.<\/p>\n\n\n\n

Fortunately, the Document Object Model (DOM)<\/a> can make it easier to manipulate or travel through a site\u2019s HTML code. The DOM works by enabling you to create a tree made up of various nodes or objects. This opens up the opportunity to change the display, structure, or function of the site, using JavaScript libraries such as jQuery<\/a>.<\/p>\n\n\n\n

In this article, we\u2019ll explain what the DOM is and why you might want to use it. We\u2019ll then provide some standard jQuery manipulation techniques for using the DOM with WordPress. Let\u2019s dive right in!<\/p>\n\n\n\n

What Is the DOM?<\/h2>\n\n\n\n

Simply put, the DOM is an Application Programming Interface (API) for HTML. It creates a tree of objects that represents the content and structure of a web page. It\u2019s also a platform and language-agnostic<\/a> script, which makes it quite versatile. When the DOM represents HTML source code in this way, it makes it accessible so that various programming languages can connect to it.<\/p>\n\n\n\n

Why Use the DOM?<\/h2>\n\n\n\n

As a WordPress user, you are likely seeing the DOM in action any time you encounter dynamic interactivity. This might include when an error is returned if a form is submitted with missing information. Content sliders are another example of the DOM in use:<\/p>\n\n\n\n

Developers can use the DOM to update and change nearly all of the elements on a web page. You can use it to build documents and navigate their structure. The DOM can also be used to add, modify, or delete elements and objects. <\/p>\n\n\n\n

DOM Manipulation With JQuery<\/h2>\n\n\n\n

To be clear, the DOM and HTML are not the same, although they should contain the same elements. The DOM is a modeled representation of HTML source code, and can be altered by client-side JavaScript<\/a>.<\/p>\n\n\n\n

Below, we\u2019ll be looking at methods in the jQuery library for testing out some DOM manipulation techniques. Keep in mind that different browsers handle the DOM<\/a> in their own way, but you don\u2019t have to do anything special to begin using it. All browsers use some form of the DOM to make pages accessible to JavaScript.<\/p>\n\n\n\n

DOM Manipulation Techniques<\/h2>\n\n\n\n

The DOM can be used in a wide variety of ways. To illustrate its flexibility, let\u2019s look at six techniques that can get you started with this useful API.<\/p>\n\n\n\n

1. The Before() Method<\/h3>\n\n\n\n

True to its name, the before()<\/em> method is used when you want to insert any element before another target element, as indicated in the code.<\/p>\n\n\n\n

In this example, the method can be used<\/a> to add a square element with text above a designated element, such as a button, once it is clicked on:<\/p>\n\n\n\n

$(this).before( \"<div class='square'>Another square<\/div>\" );<\/pre>\n\n\n\n
Page placement and layout are considerations to keep in mind when using this method. You\u2019ll want to make sure your new element is not going to break your layout or cause trouble visually.<\/p>\n\n\n\n
2. The After() Method<\/h3>\n\n\n\n
In the same way that the before()<\/em> method lets you insert elements before another indicated element, the after()<\/em> method allows for the opposite. For example, it could be used to add an element right below<\/a> a button, once the button is selected: <\/p>\n\n\n\n
$(this).after( \"<div class='square'>Another square<\/div>\" );<\/pre>\n\n\n\n
Adding interactive content by manipulating the DOM with jQuery like this is a solid way to gain interactivity, without losing speed<\/a> in the process.<\/p>\n\n\n\n
3. The Append() Method<\/h3>\n\n\n\n
Instead of making individual new elements appear, you might want to add your new element onto an existing one. For instance, maybe you want to add the text \u201cHappy Birthday!\u201d within a colored area whenever a specific button is clicked on.<\/p>\n\n\n\n
To append your new element to the target element\u2019s existing content, you would insert the append()<\/em> jQuery command within the HTML source code<\/a>:<\/p>\n\n\n\n
$( \".box\" ).append( \"<p>Happy Birthday!<\/p>\" );<\/pre>\n\n\n\n
This method adds the manipulation onto the end of the element you indicate in the string, rather than putting it before or after. Within the context of the full HTML document, you can see how the manipulation takes place:<\/p>\n\n\n\n
<!doctype html>
<title>Example<\/title>
<style>
.box {
  background: orange;
  color: white;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
<\/style>
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"><\/script>
<script>
  $( function() {
    $( \"button\" ).click( function() {
      $(this).after( \"<div class='box'>Happy Birthday!<\/div>\" );
    });
  });
<\/script>
<button>Create a box<\/button><\/pre>\n\n\n\n
This technique gives you a simple option for creating interactivity within a confined space. Just remember, with this particular method the manipulations will appear as an extension of the element you indicate, rather than as new individual elements.<\/p>\n\n\n\n
4. The Prepend() Method<\/h3>\n\n\n\n
As the balance to the append()<\/em> method, prepend()<\/em> will add an element to the end of whatever target element you indicate in the jQuery command<\/a>:<\/p>\n\n\n\n
$( \".banner\" ).prepend( \"<p>Happy Birthday!<\/p>\" );<\/pre>\n\n\n\n
In this example, the text \u201cHappy Birthday!\u201d would appear at the beginning of the banner indicated in the code string.<\/p>\n\n\n\n
It\u2019s worth noting that these methods (including before()<\/em>, after()<\/em>, and append()<\/em>) are all acceptable approaches for simple uses. However, we do recommend other techniques for more complex insertions.<\/p>\n\n\n\n
5. The Clone() Method<\/h3>\n\n\n\n
Next up, the clone()<\/em> method is a pretty powerful option in terms of manipulating the DOM with jQuery. While the previous four techniques enable you to insert elements and move them around, clone()<\/em> makes it possible to copy an element, remove it from its original place, and reinsert or append it elsewhere.<\/p>\n\n\n\n
For example, this line means that the original box element will remain where it is, while a clone of it will be appended<\/a> to the triangle element:<\/p>\n\n\n\n
$( \".box\" ).clone().appendTo( \".triangle\" );<\/pre>\n\n\n\n
The downside to this method is that it can cause duplication of the element\u2019s id<\/em> attribute. These attributes are meant to be unique. You can avoid this issue by using the class<\/em> attributes as identifiers, and employing the clone method sparingly<\/a>. <\/p>\n\n\n\n
6. The Wrap() Method<\/h3>\n\n\n\n
Finally, the wrap()<\/em> method is useful if you want to wrap an element around an existing string. For instance, you can wrap several paragraphs<\/a> in a new HTML structure by identifying the class and indicating what structure is being implemented:<\/p>\n\n\n\n
$( \".targetclass\" ).wrap( \"<div class='new'><\/div>\" );<\/pre>\n\n\n\n
With this technique, you are creating a <div><\/em> around any element that matches the target class in the wrap()<\/em> string. While you can create a wrap that is several levels deep, however, you should make sure there is only one innermost element.<\/p>\n\n\n\n
Troubleshooting the DOM<\/h2>\n\n\n\n
When it comes to working with the DOM, we want to highlight one key aspect you\u2019ll want to pay attention to. In order to keep your pages loading fast and avoid unnecessary code (especially if you\u2019re developing a theme), you should be mindful not to use any elements that are not part of the DOM tree.<\/p>\n\n\n\n
If you\u2019re not sure whether an element is part of the DOM or not, you can check each one through your browser<\/a> on the front end of your site. You can inspect elements on the page, and determine where they are included in the DOM tree.<\/p>\n\n\n\n
This is especially helpful when another script has changed the original HTML of your site. Otherwise, your HTML and DOM<\/a> may sometimes appear exactly the same. <\/p>\n\n\n\n
Explore Other WP Engine Resources and Tools<\/h2>\n\n\n\n
If you think of the DOM as an organic part of your site, a living resource that responds to HTML source code, the power of its accessibility is pretty astounding. That\u2019s why understanding the DOM and how it can be used to enhance your projects can help take your site to the next level. <\/p>\n\n\n\n
Manipulating the DOM with jQuery highlights the beauty of WordPress\u2019 open-source platform. Here at WP Engine, we understand how high-quality developer resources<\/a> can make all the difference. That\u2019s why we offer plenty of help for WordPres users, along with top-notch hosting plans<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
Thanks to WordPress\u2019 open-source platform and vibrant developer community, creating themes for the platform has a pretty wide appeal. Navigating all the elements and content required to build a WordPress site can be challenging, however, depending on your programming knowledge and experience. Fortunately, the Document Object Model (DOM) can make it easier to manipulate or…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":0,"template":"","resource-topic":[904],"resource-role":[895,896,906,897,903],"resource-type":[916],"class_list":["post-91376","resource","type-resource","status-publish","hentry"],"yoast_head":"\nHow To Manipulate DOM in WordPress | WP Engine<\/title>\n<meta name=\"description\" content=\"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Manipulate DOM in WordPress | WP Engine\" \/>\n<meta property=\"og:description\" content=\"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T00:13:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/\",\"url\":\"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/\",\"name\":\"How To Manipulate DOM in WordPress | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2019-09-05T19:12:08+00:00\",\"dateModified\":\"2023-06-29T00:13:13+00:00\",\"description\":\"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Manipulating DOM in WordPress using JQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Manipulate DOM in WordPress | WP Engine","description":"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How To Manipulate DOM in WordPress | WP Engine","og_description":"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.","og_url":"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-06-29T00:13:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2024\/05\/WPE-IMG-Thumbnail-1200x630-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/","url":"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/","name":"How To Manipulate DOM in WordPress | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2019-09-05T19:12:08+00:00","dateModified":"2023-06-29T00:13:13+00:00","description":"manipulating DOM within WordPress? Our guide gets into the steps you'll need to take, from HTML to Jquery. Dive into our DOM WordPress guide.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/how-to-manipulate-dom-in-wordpress-with-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Manipulating DOM in WordPress using JQuery"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/shutterstock_697413862.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Entrepreneur, Freelancer, Marketer","topic":"<strong>Topics:<\/strong> Marketing","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/91376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=91376"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=91376"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=91376"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=91376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}