diff --git a/DOM-Manipulation.md b/DOM-Manipulation.md new file mode 100644 index 0000000..1be590c --- /dev/null +++ b/DOM-Manipulation.md @@ -0,0 +1,312 @@ +* [`remove`](#usage-remove) | [`empty`](#usage-empty) | [`replaceWithClone`](#usage-replaceWithClone) +* [`append`](#usage-append) | [`prepend`](#usage-prepend) | [`before`](#usage-before) | [`after`](#usage-after) +* [`replaceWith`](#usage-replaceWith) | [`appendTo`](#usage-appendTo) | [`prependTo`](#usage-prependTo) +* [`insertBefore`](#usage-insertBefore) | [`insertAfter`](#usage-insertAfter) +* [`wrap`](#usage-wrap) | [`unwrap`](#usage-unwrap) + +--- + +## .remove + +**Description** +Removes the set of matched elements from the DOM. + +**Parameters** + +* None. + +**Returns** + +* (jBase): The removed elements (detached). + +**Example** + +```javascript +$('.ads').remove(); + +``` + +--- + +## .empty + +**Description** +Remove all child nodes of the set of matched elements from the DOM. + +**Parameters** + +* None. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +// Clears the content of .container but keeps the container itself +$('.container').empty(); + +``` + +--- + +## .replaceWithClone + +**Description** +Replaces the selected elements with a deep clone of themselves. Useful for stripping event listeners. + +**Parameters** + +* None. + +**Returns** + +* (jBase): The new cloned elements. + +**Example** + +```javascript +// Removes all events attached to the button by cloning it +$('button#reset').replaceWithClone(); + +``` + +--- + +## .append + +**Description** +Insert content, specified by the parameter, to the end of each element in the set of matched elements. + +**Parameters** + +* `content` (String|HTMLElement|jBase): The content to insert. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +$('.list').append('
Test
').appendTo('.container'); + +``` + +--- + +## .prependTo + +**Description** +Insert every element in the set of matched elements to the beginning of the target. + +**Parameters** + +* `target` (String|HTMLElement|jBase): The target element. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +$('Intro
').prependTo('body'); + +``` + +--- + +## .insertBefore + +**Description** +Insert every element in the set of matched elements immediately before the target element. + +**Parameters** + +* `target` (String|HTMLElement): A CSS selector or DOM element before which the content will be inserted. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +$('New Alert
').insertBefore('#main-content'); +``` + +--- + +## .insertAfter + +**Description** +Insert every element in the set of matched elements immediately after the target element. + +**Parameters** + +* `target` (String|HTMLElement): A CSS selector or DOM element after which the content will be inserted. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +$('* Required').insertAfter('input.required'); +``` + +--- + +## .wrap + +**Description** +Wrap an HTML structure around each element in the set of matched elements. + +**Parameters** + +* `structure` (String): HTML string specifying the structure (e.g., ``). + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +$('.item').wrap(''); + +``` + +--- + +## .unwrap + +**Description** +Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place. + +**Parameters** + +* None. + +**Returns** + +* (jBase): Current instance. + +**Example** + +```javascript +// Removes the parent