<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>const h1 = (text) => `<h1>${text}</h1>`</script>
<script>document.body.innerHTML += h1('first script tag')</script>
</head>
<body>
<script> document.body.innerHTML += h1 ('second script tag')</script>
<h1>first h1 tag</h1>
<script> document.body.innerHTML += h1 ('third script tag')</script>
<h2>second h2 tag</h2>
</body>
</html>### Structure and Execution Order
1. **Head Script Tags**:
- The first script defines an arrow function `h1` that takes a `text` argument and returns a string representing an `<h1>` element with that text.
- The second script immediately tries to append an `<h1>` element to the `body` using `document.body.innerHTML += h1('first script tag')`. This script executes before the body is parsed, which can result in unexpected behavior since `document.body` might not be fully defined at this point.
2. **Body Script Tag**:
- There's a script tag directly within the `body` that attempts to append another `<h1>` element using the same method, this time with the text `'second script tag'`. This script should execute without issue since it's within the body and after the body has started parsing.
- The `<h1>first h1 tag</h1>` and `<h2>second h2 tag</h2>` are statically defined in the HTML and should display as normal.
3. **Another Body Script Tag**:
- Another script tag within the body attempts to append an `<h1>` element with `'third script tag'`. Like the previous script tag within the body, this should execute as expected.
### Expected Outcome and Issues
- **Early Execution in `<head>`**: The attempt to append to `document.body.innerHTML` in the head might not work as expected because the body of the document might not be fully parsed and available when the script runs. This behavior can vary between browsers and might result in an error or simply have no effect at all.
- **Overwriting Existing Content**: Each use of `document.body.innerHTML += ...` reads the entire inner HTML of the body, adds the new content to the end, and then writes it back. This not only affects performance due to re-parsing of the content but also removes any event listeners attached to existing elements and resets any JavaScript state in the DOM elements. After the document is fully loaded, dynamically added `<h1>` and `<h2>` elements will be removed by subsequent `innerHTML` modifications.
### Correct Approach for Dynamic Content Addition
To add content dynamically without overwriting existing content or losing event listeners, it's better to use methods like `document.createElement` and `Node.appendChild` or `Element.insertAdjacentHTML`. For instance, to append an `<h1>` element without overwriting existing content, you could revise the script tags in the body to something like:
```html
const newH1 = document.createElement('h1');
newH1.textContent = 'first script tag';
document.body.appendChild(newH1);
```
This method creates a new `<h1>` element, sets its text content, and appends it to the body, preserving existing elements and their attached event listeners.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 7) Creating a document object (0) | 2024.12.23 |
|---|---|
| chapter 7) DomContentLoaded event (0) | 2024.12.22 |
| chapter 7) Keyboard event (1) | 2024.12.19 |
| chapter 7) localStroage (0) | 2024.12.18 |
| chapter 7) Manipulating (1) | 2024.12.17 |