Long description

Set 1: Line 1: Open angle bracket div i d equals open double quotes first close double quotes close angle bracket. Line 2: Open angle bracket h 1 close angle bracket D O M Example open angle bracket forward slash h 1 close angle bracket. Line 3: Open angle bracket p close angle bracket Existing element open angle bracket forward slash p close angle bracket. Line 4: Open angle bracket forward slash div close angle bracket.

Set 2 is labeled Visualizing the D O M elements: Line 1: Open angle bracket div close angle bracket. Line 2: Open angle bracket h 1 close angle bracket open double quotes D O M Example close double quotes open angle bracket forward slash h 1 close angle bracket. Line 3. open angle bracket p close angle bracket open double quotes Existing element close double quotes open angle bracket forward slash p close angle bracket. Line 4: Open angle bracket forward slash div close angle bracket.

JavaScript code: Step 1: Create a new text node. Line 1: const text equals document dot createTextNode open parenthesis open double quotes this is dynamic close double quotes close parenthesis semicolon. This is dynamic is written at the right of step 1. Step 2: Create a new empty open angle bracket p close angle bracket element. Line 2: const p equals document dot createElement open parenthesis open double quotes p close double quotes close parenthesis semicolon. Open angle bracket p close angle bracket open angle bracket forward slash p close angle bracket is written at the right of step 2. Step 3: Add the text node to new open angle bracket p close angle bracket element. Line 3: p dot appendChild open parenthesis text close parenthesis semicolon. Open angle bracket p close bracket open double quotes this is dynamic close double quotes open angle bracket forward slash p close angle bracket is written at the right of step 3. Step 4: Add the open angle bracket p close angle bracket element to the open angle bracket div close angle bracket. Line 4: const first equals document dot getElementById open parenthesis open double quotes first close double quotes close parenthesis semicolon. Line 5: first dot appendChild open parenthesis p close parenthesis semicolon.

Set 3: Line 1: Open angle bracket div i d equals open double quotes first close double quotes close angle bracket. Line 2: Open angle bracket h 1 close angle bracket D O M Example open angle bracket forward slash h 1 close angle bracket. Line 3: Open angle bracket p close angle bracket Existing element open angle bracket forward slash p close angle bracket. Line 4: Open angle bracket p close angle bracket this is dynamic open angle bracket forward slash p close angle bracket. Line 5: Open angle bracket forward slash div close angle bracket.

Set 4: Line 1: Open angle bracket div close angle bracket. Line 2: Open angle bracket h 1 close angle bracket open double quotes D O M Example close double quotes open angle bracket forward slash h 1 close angle bracket. Line 3: Open angle bracket p close angle bracket open double quotes Existing element close double quotes open angle bracket forward slash p close angle bracket. Line 4: Open angle bracket p close angle bracket open double quotes this is dynamic close double quotes open angle bracket forward slash p close angle bracket. Line 5: Open angle bracket forward slash div close angle bracket.