jQuery HTML & CSS
This chapter covers how to read & write content, insert & remove elements, manage classes & styles, deal with attributes vs. properties, measure dimensions & positions, and use helpers like wrap(), clone(), and replaceWith().
Quick Reference
| API | Description | Example |
|---|---|---|
html(), text(), val() |
Get/set HTML, plain text, and input values. | $('#out').html('<b>Hi</b>') |
append/prepend/before/after |
Insert nodes inside or around an element. | $('#list').append('<li>C</li>') |
remove(), empty() |
Remove element itself or just its children. | $('#wrap .chip:eq(1)').remove() |
addClass/removeClass/toggleClass/hasClass |
Manage classes for state & styling. | $('#box').toggleClass('active') |
css() (get/set) |
Read or set inline styles; pass object to set multiple. | $('#box').css({ width:120, background:'#c8e6c9' }) |
| Dimensions | width/height, innerWidth/Height, outerWidth/Height([true]). |
$('#box').outerWidth(true) (incl. margin) |
| Position | offset() (relative to doc), position() (relative to offset parent). |
$('#box').offset({top:100,left:200}) |
attr() vs prop() |
attr=HTML attribute; prop=DOM property (reflects live state). | $('#chk').prop('checked', true) |
data() |
Read data-* attributes & store runtime state. |
$('#box').data('role','admin') |
| Structure helpers | wrap(), unwrap(), clone(), replaceWith() |
$('#p').wrap('<div class="card">') |
| Iterating | each() (iterate), map() (transform to array with .get()). |
$('#u li').map((i,el)=>$(el).text()).get() |
Tip: Prefer
text() when inserting user input to avoid injecting HTML. Use html() only for trusted strings.1) Read & Write: html() / text() / val()
$('#out').html('<b>Bold</b>'); // renders <b>
$('#out').text('<b>Plain text</b>'); // shows tags
$('#inp').val('Sonu');
2) Insert: append / prepend / before / after
$('#list').append('<span>C</span>');
$('#list').prepend('<span>Z</span>');
3) Remove: remove() vs empty()
$('#wrap .chip').eq(1).remove();
$('#wrap').empty();
4) Classes: addClass / removeClass / toggleClass / hasClass
$('#box').toggleClass('hot');
5) Inline Styles: css() get/set
$('#box').css({ width: 120, background: '#c8e6c9' });
6) Dimensions: width/height, inner/outer
$('#box').outerWidth(true); // include margin
7) Position: offset() vs position()
var off = $('#box').offset();
var pos = $('#box').position();
8) attr() vs prop() (important!)
attr reads/writes the HTML attribute; prop reads/writes the live DOM property.
$('#chk').prop('checked', true);
9) Data API: data()
$('#box').data('role', 'admin');
// Reads data-* and runtime values
10) Structure helpers: wrap(), unwrap(), clone(), replaceWith()
$('#p').wrap('<div class="card">');
$('#p').clone().insertAfter('#p');
11) Iterate: each() & map()
$('#u li').each(function(i, el){ /* ... */ });
var arr = $('#u li').map(function(i, el){ return $(el).text(); }).get();
Security: Never inject untrusted strings with
html(). Escape or use text().
Performance: Batch DOM updates (build a string/fragment and append once), and cache $('#id') selections used in loops/handlers.