jQuery DOM Manipulation
jQuery DOM Manipulation
html(), text(), val()
These methods are used to get or set content of HTML elements.
<div id="htmlExample"><strong>Hello</strong> World</div>
<button onclick="$('#htmlExample').html('<em>Hi there!</em>')">Change HTML</button>
<button onclick="$('#htmlExample').text('Just text content')">Change Text</button>
<br><br>
<input type="text" id="inputBox" value="Initial">
<button onclick="alert($('#inputBox').val())">Get Value</button>
Hello World
attr(), prop(), removeAttr()
These methods allow you to get or change attributes and properties of elements.
<input type="checkbox" id="check1">
<button onclick="alert($('#check1').prop('checked'))">Check prop</button>
<button onclick="$('#check1').attr('checked', true)">Set attr</button>
<button onclick="$('#check1').removeAttr('checked')">Remove attr</button>
addClass(), removeClass(), toggleClass()
These methods manage CSS classes on HTML elements.
<p id="classExample">Watch my class change!</p>
<button onclick="$('#classExample').addClass('highlight')">Add Class</button>
<button onclick="$('#classExample').removeClass('highlight')">Remove Class</button>
<button onclick="$('#classExample').toggleClass('highlight')">Toggle Class</button>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
Watch my class change!
append(), prepend(), after(), before(), remove(), empty()
These methods are used to insert or remove content in the DOM.
<div id="container"><p>Original Content</p></div>
<button onclick="$('#container').append('<p>Appended</p>')">Append</button>
<button onclick="$('#container').prepend('<p>Prepended</p>')">Prepend</button>
<button onclick="$('#container').after('<hr>')">After</button>
<button onclick="$('#container').before('<hr>')">Before</button>
<button onclick="$('#container').empty()">Empty</button>
<button onclick="$('#container').remove()">Remove</button>
Original Content
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.