Hey Paramveer

Changing Content and Attributes Dynamically

Written by

Paramveer Singh

in

When building interactive web pages, one of the most powerful abilities JavaScript offers is the capability to change content and attributes dynamically. This allows developers to update what users see or interact with, without reloading the entire page. Whether you’re working on a static site or integrating scripts into WordPress via Gutenberg blocks, understanding this concept is key to creating engaging user experiences.

Why Dynamic Changes Matter

Dynamic updates improve usability and make your site feel more responsive. Imagine updating a product price when a user selects a different variant, changing an image when hovering over a thumbnail, or modifying a button’s text after a form submission—all of this is done through dynamic content manipulation.

Accessing and Updating HTML Content

To modify the text or HTML content of an element, JavaScript provides several handy properties and methods.

Example: Changing Text Content

const heading = document.getElementById('title');
heading.textContent = 'Welcome to My Updated Page!';

Here, .textContent replaces the existing text with a new one.

Example: Updating Inner HTML

const container = document.querySelector('.content');
container.innerHTML = '<p>This is <strong>dynamically</strong> added content!</p>';

.innerHTML allows you to inject HTML markup directly into an element.

⚠️ Tip: Use .textContent when inserting plain text and .innerHTML when you need to add HTML elements.

Modifying Element Attributes

JavaScript also makes it easy to update element attributes such as src, href, or alt.

Example: Changing an Image Source

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'Updated description');

Alternatively, you can update attributes directly:

image.src = 'new-image.jpg';
image.alt = 'Updated description';

Toggling Classes and Styles

Dynamic style changes can make your site more interactive and visually appealing.

Example: Toggling Classes

const box = document.querySelector('.box');
box.classList.toggle('highlight');

.classList.toggle() adds a class if it’s missing and removes it if it’s already present.

Example: Inline Style Updates

box.style.backgroundColor = 'lightblue';
box.style.padding = '10px';

Combining Content and Attribute Updates

You can also combine updates for a more complex effect. For instance, changing a button label and disabling it after it’s clicked:

const button = document.querySelector('#submit-btn');
button.textContent = 'Submitting...';
button.disabled = true;

Using in WordPress with Gutenberg

In a WordPress Gutenberg block, you can include these scripts within your block’s JavaScript file or enqueue them using wp_enqueue_script() in your theme or plugin.

For example:

function enqueue_dynamic_scripts() {
    wp_enqueue_script(
        'dynamic-content',
        get_template_directory_uri() . '/js/dynamic-content.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_dynamic_scripts');

Then, you can safely manipulate your block’s DOM once it’s rendered.

Final Thoughts

Changing content and attributes dynamically is a cornerstone of modern front-end development. Whether you’re enhancing a simple webpage or adding interactivity to your WordPress site, mastering these JavaScript techniques helps you create seamless, real-time experiences for your users.

Experiment with different elements and interactions to see how small changes can make a big impact on your site’s usability and appeal.

More posts