<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let list = ''
list += '<ul>'
list +=' <li> Hello </li>'
list += '<li>JavaScript</li>'
list += '</ul>'
document.write(list)
</script>
</head>
<body>
</body>
</html>### Document Structure
- The document starts with the `<!DOCTYPE html>` declaration, indicating that this is an HTML5 document.
- The `<html>` element is the root of the document, with the `lang` attribute set to `"en"`, specifying English as the primary language for the document's content.
- Inside `<html>`, there are two main sections: `<head>` and `<body>`.
### Head Section
- The `<head>` section contains metadata about the document. It includes:
- A `<meta charset="UTF-8">` tag, specifying the character encoding for the document as UTF-8. This ensures that the document can correctly display a wide range of characters from different languages.
- A `<title>` tag, which sets the title of the document. In this case, the title is "Title". The title appears in the browser's title bar or tab.
### Script for Dynamic List Creation
- Inside the `<head>`, there's a `<script>` element, which contains JavaScript code that dynamically creates an HTML list (`<ul>` with two `<li>` items).
- The script initializes a variable `list` with an empty string. Then, it concatenates strings to `list` to form an unordered list (`<ul>`) with two list items (`<li>`):
- The first list item contains the text "Hello".
- The second list item contains the text "JavaScript".
- After constructing the string that represents the list, the script uses `document.write(list)` to write this HTML string directly into the document. This results in the list being rendered on the page.
### Body Section
- The `<body>` section is currently empty. All visible content is generated by the JavaScript code within the `<head>` section.
### Output
When this document is loaded in a web browser, it will display an unordered list with two items: "Hello" and "JavaScript". The `document.write()` method is used here for simplicity, but it's important to note that using `document.write()` in real-world applications is generally discouraged, especially after the document has finished loading, as it can overwrite the entire document. For dynamic content manipulation, methods involving the Document Object Model (DOM), such as `document.createElement()` and `Node.appendChild()`, are recommended for better control and flexibility.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 3) Using if conditional statements (0) | 2024.11.25 |
|---|---|
| chapter 2) Example of using increment/decrement operators (0) | 2024.11.24 |
| chapter 2) Understanding ball expressions (0) | 2024.11.23 |
| chapter 1) basic Javascript (0) | 2024.11.21 |
| chapter 5) Array methods and arrow functions (0) | 2024.04.03 |