jQuery Set Content Methods

1. jQuery Set – DOM Manipulation

jQuery offers robust methods to modify the content, values, and attributes of elements on your webpage. These methods allow you to dynamically update text, HTML, form inputs, and more, enhancing interactivity without page reloads. In this tutorial, you'll learn how to use jQuery's set methods to change text, HTML markup, form values, attributes, properties, and data attributes in real-time.

1.1. jQuery Set Methods For DOM Manipulation

Here are some key methods to modify data for building dynamic and interactive frontend applications. jQuery methods for DOM manipulation are:

• .text(): Sets the text content of an element.
• .html(): Sets the HTML content of an element.
• .val(): Sets the value of form input fields.
• .attr(): Sets the value of a specific attribute.
• .prop(): Sets the value of a property (e.g., checked, disabled).
• .data(): Sets data associated with an element.

2. Set Text Content with text() Method

The text() method in jQuery sets the text content of selected elements, allowing you to update text dynamically without changing the HTML.

$(document).ready(function(){
	$("#setTextBtn").click(function(){
		$("#textPara").text("This is the new text content.");
	});
});

2.1. jQuery text() Method With Callback

You can pass a callback function to the text() method to dynamically set the text based on the current text or index of the element. The callback receives two arguments: the index of the element and its current text content.

$(document).ready(function(){
	$("#updateTextBtn").click(function(){
		$("p").text(function(index, currentText){
			return "Updated text for paragraph " + (index + 1) + ": " + currentText;
		});
	});
});

3. Set HTML Content with html() Method

The html() method in jQuery can be used to set the HTML content of selected elements. This allows you to dynamically insert or replace HTML markup inside elements.

$(document).ready(function(){
	$("#setHtml").click(function(){
		$("#content").html("<strong>New HTML content</strong> with <em>emphasis</em>.");
	});
});

3.1. jQuery html() Method With Callback

Similar to text(), the html() method can accept a callback function to dynamically set the HTML content based on the current HTML or index of the element. The callback receives the index and the current HTML content.

$(document).ready(function(){
	$("#updateHtmlBtn").click(function(){
		$("div").html(function(index, currentHtml){
			return "<p>Updated HTML for div " + (index + 1) + "</p>" + currentHtml;
		});
	});
});

4. Set Form Field Value with val() Method

The val() method in jQuery can be used to set the value of form input fields, such as text inputs, selects, and textareas. This is useful for pre-filling forms or updating input values dynamically.

$(document).ready(function(){
	$("#setUsername").click(function(){
		$("#username").val("New Username");
	});
});

4.1. jQuery val() Method With Callback

You can pass a callback function to the val() method to set the value based on the current value or index of the input element. The callback receives the index and the current value.

$(document).ready(function(){
	$("#updateInputs").click(function(){
		$("input[type='text']").val(function(index, currentValue){
			const id = $(this).attr("id");
			if(id === "username") {
				return currentValue.toLowerCase();
			}
			if(id === "email") {
				const [user, domain] = currentValue.split("@");
				return user + "@****.com";
			}
			if(id === "phone") {
				return currentValue.replace(/^(\d{4})(\d{3})(\d{4})$/, "$1-$2-$3");
			}
			return currentValue;
		});
	});
});

5. Set Element Attributes with attr() Method

The attr() method in jQuery can be used to set the value of HTML attributes like href, src, title, etc. This allows you to dynamically update attributes of elements.

$(document).ready(function(){
	$('#setAttrBtn').click(function(){
		// Update attributes directly
		$el.attr('id', 'newId');
		$el.attr('class', 'updated-class');
	});
});

5.1. jQuery attr() Method With Callback

You can pass a callback function to the attr() method to set the attribute value based on the current attribute value or index of the element. The callback receives the index and the current attribute value.

$(document).ready(function(){
	$('#setAttrBtn').click(function(){
		// Update attributes using callback
		$title.attr('id', function(i, val){
			return val + '_updated';
		});

		$title.attr('class', function(i, val){
			return val + ' highlight';
		});
	});
});

6. Set Element Properties with prop() Method

The prop() method in jQuery can be used to set the value of properties on elements, such as checked, selected, or disabled. This is particularly useful for changing the state of form elements dynamically.

$(document).ready(function(){
	$('#toggleCheckbox').click(function(){
		$('#newsletterCheckbox').prop('checked', true);
	});
	$('#disableEmail').click(function(){
		$('#emailField').prop('disabled', true);
	});
});

6.1. jQuery prop() Method With Callback

You can pass a callback function to the prop() method to set the property value based on the current property value or index of the element. The callback receives the index and the current property value.

$(document).ready(function(){
	$('#toggleCheckboxes').click(function(){
		$('input[type="checkbox"]').prop('checked', function(index, currentChecked){
			return !currentChecked;
		});
	});
});

7. Set Custom Data with data() Method

The data() method in jQuery can be used to set custom data associated with an element. This data can be stored and accessed later, either through data-* attributes or internally by jQuery.

$(document).ready(function(){
	$('#setDataBtn').click(function(){
		$('#myProduct').data('id', 123);
		$('#myProduct').data('category', 'Electronics');
	});
});

7.1. jQuery data() Method With Dynamic Data

While data() typically sets a static value, you can dynamically compute the value to set using a loop or function. This example uses .each() to set data based on the element's index.

$(document).ready(function(){
	$('#setDynamicData').click(function(){
		$('div').each(function(index){
			$(this).data('index', index + 1);
		});
	});
});

8. Use Cases of jQuery Set Methods

• Update text or HTML content dynamically based on user interactions.
• Set form field values to prefill data or reset forms.
• Modify attributes like href or src to change links or images on the fly.
• Change properties such as checked or disabled to control form element states.
• Store custom data on elements for later use in scripts or plugins.