Insertion methods accept HTML strings, elements or jQuery 561 sets and apply to every match, cloning the content for all targets but the last. .append(), .prepend(), .after() and .before() have reversed forms (.appendTo(), .prependTo(), .insertAfter(), .insertBefore()) that take the target as the argument; .wrap(), .wrapAll() and .wrapInner() surround elements. .remove() discards elements with their data and handlers, .detach() keeps both for reinsertion, and .empty(), .unwrap(), .replaceWith() and .clone(true) do what their names say. .text(), .html(), .val() and .data() get or set values; .map() and .each() iterate.
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<div id="box" hidden><i>A</i><i>B</i><i>C</i></div>
<pre id="log" style="margin:0"></pre>
<script>
let log = '';
const show = (step) => (log += `${step.padEnd(36)}${$('#box').html()}\n`);
$('#box i').append('!'); show("$('#box i').append('!')");
$('#box i').first().detach().appendTo('#box'); show("first().detach().appendTo('#box')");
$('#box i').eq(0).wrap('<b></b>'); show("eq(0).wrap('<b></b>')");
const letters = $('#box i').map((i, el) => el.textContent[0]).get();
$('#log').text(`${log}map().get() -> ${letters}, is('i') -> ${$('#box i').is('i')}`);
</script>
Getters .html() and .val() read only the first element; .text() joins all. Never pass user input to .html(). .data() reads a data-* attribute once, then keeps changes in an internal cache that dataset never sees.