"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", em: "em", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeEditor} = _components; if (!CodeEditor) _missingMdxReference("CodeEditor", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "DOM Manipulation: Creating, Inserting, and Removing Elements" }), "\n", _jsx(_components.p, { children: "Beyond modifying existing elements, JavaScript allows you to dynamically build and change the structure of your web page. This involves creating new HTML elements from scratch, placing them strategically within the DOM tree, and removing existing ones when they are no longer needed." }), "\n", _jsx(_components.p, { children: "These operations are fundamental for single-page applications, dynamic forms, content loading, and interactive user interfaces." }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["1. Creating New Elements: ", _jsx(_components.code, { children: "document.createElement()" })] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "document.createElement()" }), " method is your entry point for generating new HTML elements that don't yet exist on the page. It creates an element node with the specified tag name."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Syntax:" }), " ", _jsx(_components.code, { children: "document.createElement(tagName)" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "tagName" }), ": A string specifying the type of element to be created (e.g., ", _jsx(_components.code, { children: "'div'" }), ", ", _jsx(_components.code, { children: "'p'" }), ", ", _jsx(_components.code, { children: "'img'" }), ", ", _jsx(_components.code, { children: "'button'" }), ")."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " A new ", _jsx(_components.code, { children: "Element" }), " object."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " Creating an element only makes it exist in memory; it is ", _jsx(_components.em, { children: "not" }), " automatically added to the DOM. You must use an insertion method to make it visible on the page."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Creating Elements", code: `console.log('--- Creating Elements Demo ---'); // 1. Create a new div element const newDiv = document.createElement('div'); console.log('1. Created Div:', newDiv); // Logs the HTML element object // You can immediately set its properties newDiv.textContent = 'I am a new div!'; newDiv.id = 'myNewDiv'; newDiv.classList.add('box', 'blue'); newDiv.style.border = '1px solid black'; newDiv.style.padding = '10px'; newDiv.style.margin = '5px'; console.log(' New Div (configured):', newDiv.outerHTML); // 2. Create a new button const newButton = document.createElement('button'); newButton.textContent = 'Click Me!'; newButton.id = 'dynamicButton'; console.log('2. Created Button:', newButton.outerHTML); // 3. Create an image element const newImage = document.createElement('img'); newImage.src = 'https://placehold.co/50x50/grey/white?text=Img'; newImage.alt = 'Small placeholder image'; console.log('3. Created Image:', newImage.outerHTML); // At this point, none of these are visible on the page yet! console.log('\\nNote: Elements are created in memory, not yet in the DOM.'); `, language: "javascript", showConsole: true, editorHeight: 500, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["2. Inserting Elements: ", _jsx(_components.code, { children: "appendChild()" }), ", ", _jsx(_components.code, { children: "prepend()" }), ", ", _jsx(_components.code, { children: "insertBefore()" })] }), "\n", _jsx(_components.p, { children: "Once you have a created element, you need to insert it into the existing DOM tree to make it visible and interactive." }), "\n", _jsxs(_components.h3, { children: ["a) ", _jsx(_components.code, { children: "parentNode.appendChild(childElement)" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Inserts a node as the ", _jsx(_components.strong, { children: "last child" }), " of a specified parent node."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " The appended child node."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " If the child node already exists in the DOM, ", _jsx(_components.code, { children: "appendChild()" }), " moves it from its current position to the new one."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["b) ", _jsx(_components.code, { children: "parentNode.prepend(childElement)" }), " (ES6+)"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Inserts a node as the ", _jsx(_components.strong, { children: "first child" }), " of a specified parent node."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " ", _jsx(_components.code, { children: "undefined" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " Similar to ", _jsx(_components.code, { children: "appendChild()" }), ", if the child node already exists, ", _jsx(_components.code, { children: "prepend()" }), " moves it."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["c) ", _jsx(_components.code, { children: "parentNode.insertBefore(newElement, referenceElement)" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Inserts a ", _jsx(_components.code, { children: "newElement" }), " immediately ", _jsx(_components.strong, { children: "before" }), " a ", _jsx(_components.code, { children: "referenceElement" }), " (which must be a child of ", _jsx(_components.code, { children: "parentNode" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " The inserted ", _jsx(_components.code, { children: "newElement" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " Provides more precise control over where an element is inserted relative to its siblings."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Inserting Elements", code: `

Container

Existing Item 1
Existing Item 2

`, language: "javascript", showConsole: true, editorHeight: 600, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["3. Removing Elements: ", _jsx(_components.code, { children: "removeChild()" }), ", ", _jsx(_components.code, { children: "element.remove()" })] }), "\n", _jsx(_components.p, { children: "Just as you can add elements, you can also remove them from the DOM." }), "\n", _jsxs(_components.h3, { children: ["a) ", _jsx(_components.code, { children: "parentNode.removeChild(childElement)" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Removes a specified child node from the DOM. You must call this method on the ", _jsx(_components.code, { children: "parent" }), " of the child you want to remove."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " The removed node."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Key Point:" }), " The ", _jsx(_components.code, { children: "childElement" }), " must be a direct child of the ", _jsx(_components.code, { children: "parentNode" }), " on which ", _jsx(_components.code, { children: "removeChild()" }), " is called. If not, it will throw an error."] }), "\n"] }), "\n", _jsxs(_components.h3, { children: ["b) ", _jsx(_components.code, { children: "element.remove()" }), " (Modern & Simpler - ES6+)"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Purpose:" }), " Removes the element from the DOM. This is a simpler and more direct way to remove an element, as you call it directly on the element you want to remove, without needing a reference to its parent."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Returns:" }), " ", _jsx(_components.code, { children: "undefined" }), "."] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Removing Elements", code: `

Paragraph 1

Span inside div to remove

Paragraph 2

`, language: "javascript", showConsole: true, editorHeight: 650, template: "vanilla", stack: true }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Exercise: Dynamic List Manager" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Instructions:" }), "\nCreate a simple \"To-Do List\" interface that allows users to add and remove items dynamically."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

My To-Do List

\n \n \n

\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Your Task:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Add To-Do Item:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "todoInput" }), ", ", _jsx(_components.code, { children: "addTodoBtn" }), ", and ", _jsx(_components.code, { children: "todoList" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "addTodoBtn" }), " is clicked:", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Get the value from ", _jsx(_components.code, { children: "todoInput" }), "."] }), "\n", _jsxs(_components.li, { children: ["If the value is empty, ", _jsx(_components.code, { children: "alert" }), " (or log an error message) and do nothing."] }), "\n", _jsxs(_components.li, { children: ["Create a new ", _jsx(_components.code, { children: "

" }), " element."] }), "\n", _jsxs(_components.li, { children: ["Set its ", _jsx(_components.code, { children: "textContent" }), " to the input value."] }), "\n", _jsxs(_components.li, { children: ["Create a \"Remove\" button (", _jsx(_components.code, { children: "

Existing Task 1
Existing Task 2

` })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }