Advanced DOM Manipulation Techniques

jQuery is well-known for its ability to simplify HTML document traversal and manipulation. While basic DOM manipulation like adding and removing elements is straightforward, mastering advanced techniques allows developers to build dynamic, responsive, and powerful web applications with ease.

Introduction to DOM Manipulation

DOM manipulation refers to the ability to dynamically alter the structure, content, or style of HTML elements using JavaScript or jQuery. With jQuery, these manipulations become easier and more intuitive. You can select elements, change their content, move them around, and even remove them with just a few lines of code.

By understanding advanced DOM manipulation techniques, you can build dynamic user interfaces that respond to user input, update in real-time, and adjust to different contexts.

Efficient DOM Selection Techniques

Selecting DOM elements is the foundation of any manipulation process. jQuery provides a variety of methods to select elements more efficiently and precisely.

Chaining Methods

One of jQuery’s most powerful features is method chaining, which allows you to perform multiple actions on a set of elements without having to write repetitive code.

Example:

				
					$('#header').css('color', 'blue').slideUp().slideDown();

Explanation:

  • Code: The #header element is selected, its color is changed to blue, and it is animated to slide up and slide down.
  • Output: The header will turn blue, disappear, and reappear with a sliding effect.

 

Filtering Selections

You can filter selections to target specific elements more effectively using methods like .filter(), .not(), and .is().

Example:

				
					$('li').filter('.active').css('font-weight', 'bold');

Explanation:

  • Code: This code selects all <li> elements, filters the ones with the class .active, and changes their font to bold.
  • Output: Only the active list items will be bolded.

Inserting, Appending, and Prepending Elements

Inserting elements dynamically into the DOM allows for the creation of dynamic interfaces where content can be added or modified on the fly.

Inserting New Elements

jQuery provides several methods to insert elements into the DOM, such as .append(), .prepend(), .before(), and .after().

Example:

				
					$('#container').append('<p>New paragraph added!</p>');

Explanation:

  • Code: This appends a new paragraph inside the #container element.
  • Output: A new <p> will be added to the end of the container.

 

Moving Elements

You can also move existing elements to a new location in the DOM, essentially reordering your page.

Example:

				
					$('#content').prepend($('#sidebar'));

Explanation:

  • Code: This moves the #sidebar element to the top of the #content container.
  • Output: The sidebar will now appear before any content inside the content div.

Replacing and Wrapping Elements

Replacing or wrapping elements is another useful technique when building dynamic applications.

Replacing Elements with .replaceWith()

The .replaceWith() method allows you to replace an element with another.

Example:

				
					$('.old-element').replaceWith('<div class="new-element">New Content</div>');

Explanation:

  • Code: This replaces all elements with the class .old-element with a new <div> containing the text “New Content.”
  • Output: The old element is removed, and the new element takes its place.

 

Wrapping Elements with .wrap()

Wrapping elements around other elements can be achieved using the .wrap() and .unwrap() methods.

Example:

				
					$('.content').wrap('<div class="wrapper"></div>');

Explanation:

  • Code: This wraps a <div> around each element with the class .content.
  • Output: Every .content element will now be enclosed within a .wrapper <div>.

Modifying DOM Element Properties

.html(), .text(), and .val()

  • .html(): Allows you to get or set the HTML content inside an element.
  • .text(): Allows you to get or set the text content of an element.
  • .val(): Works for form elements, retrieving or setting their value.

Example:

				
					$('#myDiv').html('<p>Updated HTML content!</p>');

Explanation:

  • Code: This changes the HTML inside #myDiv to a new paragraph.
  • Output: The content inside #myDiv will be replaced with the updated HTML.

Dynamic Class Manipulation

jQuery makes it simple to manipulate CSS classes dynamically, which is essential for applying different styles based on user actions or system state.

Example:

				
					$('#myDiv').addClass('highlight');
$('#myDiv').removeClass('highlight');
$('#myDiv').toggleClass('active');

Explanation:

  • Code: The first line adds the highlight class to #myDiv. The second line removes it, and the third line toggles the active class, adding it if it’s not there or removing it if it is.
  • Output: The appearance of the div will change depending on the CSS rules associated with these classes.

Event Handling in Dynamic Elements

Event Delegation with .on()

When adding new elements dynamically, you often need to ensure that event handlers work on both existing and new elements. Event delegation with .on() is the most efficient way to handle events in dynamically created elements.

Example:

				
					$(document).on('click', '.dynamicButton', function() {
    alert('Button clicked!');
});

Explanation:

  • Code: This code attaches a click event to any button with the class .dynamicButton, whether it exists when the page loads or is created later.
  • Output: Any time a button with this class is clicked, an alert will appear.

DOM Traversal Techniques

jQuery provides several methods for DOM traversal, making it easy to move between elements in the hierarchy.

Example:

				
					$('.child').parent().css('background-color', 'yellow');

Explanation:

  • Code: This finds the parent of the element with the class .child and changes its background color.
  • Output: The parent element of .child will have a yellow background.

Working with Collections of Elements

When working with multiple elements, jQuery allows you to manipulate all of them at once using methods like .each().

Example:

				
					$('li').each(function(index) {
    $(this).text('Item ' + (index + 1));
});

Explanation:

  • Code: This loops through all <li> elements and updates their text to reflect their index.
  • Output: Each list item will display its corresponding number.

Animating DOM Manipulations

Animations in jQuery allow you to provide visual feedback when elements are inserted, moved, or removed.

Example:

				
					$('#box').fadeIn().fadeOut();

Explanation:

  • Code: This makes the #box element appear and disappear with a fade animation.
  • Output: The element will fade in and out of view smoothly.

Summary of Key Techniques

  1. Efficient DOM Selection: Use chaining and filtering for concise, readable code.

  2. Inserting and Appending Elements: Use methods like .append(), .prepend(), .before(), and .after() to insert elements dynamically.

  3. Replacing and Wrapping Elements: Replace or wrap elements easily using .replaceWith() and .wrap().

  4. Modifying DOM Properties: Get or set element content with .html(), .text(), and .val().

  5. Class Manipulation: Add, remove, and toggle CSS classes with .addClass(), .removeClass(), and .toggleClass().

  6. Event Handling for Dynamic Elements: Use event delegation (.on()) for elements added dynamically.

  7. DOM Traversal: Traverse the DOM tree using methods like .parent(), .children(), and .find().

  8. Manipulating Multiple Elements: Loop through collections of elements with .each().

  9. Animating DOM Manipulations: Enhance user experience with built-in jQuery animations like .fadeIn() and .slideUp().

  10. Performance Optimization: Reduce reflows by batching DOM updates and detaching elements before manipulation.

By mastering these techniques, you can create feature-rich applications with minimal code. Understanding how to efficiently manipulate the DOM with jQuery will save development time, improve performance, and allow you to create user-friendly interfaces. With the practical examples and performance optimization tips, you should now be equipped to tackle even the most complex DOM manipulation tasks.

Final Code Example: A Dynamic Web Page

Let’s combine everything learned into a final example that demonstrates dynamic DOM manipulation, event delegation, and animations.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced DOM Manipulation</title><style>.box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
            display: none;
        }
        .highlight {
            border: 2px solid red;
        }</style> <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head>
<body>

<button id="addBox">Add Box</button>
<div id="container"></div> <script type="litespeed/javascript">$(document).ready(function(){$('#addBox').on('click',function(){let newBox=$('<div class="box">New Box</div>');$('#container').append(newBox);newBox.fadeIn(500)});$(document).on('click','.box',function(){$(this).toggleClass('highlight')})})</script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://diginode.in/wp-content/litespeed/js/96d0e6d4ba93134cbdab615e06eb2824.js?ver=a1a89"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

Explanation:

  • HTML Structure: A button (#addBox) is used to add new boxes (.box) inside a container (#container).
  • jQuery Logic:
    • When the button is clicked, a new <div> with the class .box is created and appended to the container.
    • The new box is faded in using .fadeIn().
    • Using event delegation with .on(), any dynamically added .box can be clicked to toggle a highlight class, which adds a red border.
  • Output: The user clicks the “Add Box” button to create new boxes, and clicking any box toggles a highlight effect.

From efficient DOM selection and insertion to advanced features like element wrapping, replacing, and even animations, you now have a comprehensive understanding of how to manipulate the DOM at a granular level using jQuery. Happy Coding!❤️

Table of Contents

Popular Tutorials

Contact here

Copyright © 2025 Diginode

Made with ❤️ in India

Home
Roadmap
ATS Resume
Playground
Resources