如何在JS中創建和附加元素？

<p>使用document.createElement() 創建新元素；2. 通過textContent、classList、setAttribute 等方法自定義元素；3. 使用appendChild() 或更靈活的append() 方法將元素添加到DOM 中；4. 可選地使用insertBefore()、before() 等方法控制插入位置；完整流程為創建→ 自定義→ 添加，即可動態更新頁面內容。

<p>

<p> Creating and appending elements in JavaScript is a common task when building dynamic web pages. Here's how to do it step by step, with clear and practical examples.

---

1. Create a New Element with document.createElement()

<p> To create a new HTML element, use document.createElement('tagname') .

 const newParagraph = document.createElement('p');

<p> Now you have a <p> element in memory — but it's not yet part of the page.

<p> You can set properties like text, attributes, or styles:

 newParagraph.textContent = 'This is a new paragraph.';
// Or use innerHTML if you need to include HTML tags
// newParagraph.innerHTML = &#39;<strong>Bold text</strong>&#39;;

---

2. Append the Element to the DOM

<p> Use methods like appendChild() or append() to add the element to an existing parent in the DOM.

Example: Append to the body

 document.body.appendChild(newParagraph);

Example: Append to a specific container

 const container = document.getElementById('container');
container.appendChild(newParagraph);

<p> ? appendChild() only accepts nodes and adds one at a time.
? append() is more flexible — it can add multiple nodes and even strings.

 container.append(newParagraph); // works the same here

<p> You can also append multiple items:

 const span = document.createElement('span');
span.textContent = 'A new span';

container.append(newParagraph, span); // append both

---

3. Set Attributes and Classes (Optional but Common)

<p> Before appending, you might want to add classes or attributes:

 newParagraph.classList.add('highlight');
newParagraph.setAttribute('id', 'intro-text');
// Or set styles directly
newParagraph.style.color = 'blue';

---

4. Complete Example: Create and Append a List Item

 // Step 1: Create elements
const li = document.createElement('li');
const strong = document.createElement('strong');

// Step 2: Add content
strong.textContent = 'Important item';
li.appendChild(strong);

// Step 3: Add to the list
const ul = document.querySelector('ul');
ul.append(li);

<p> This would add <li><strong>Important item</strong></li> to your unordered list.

---

Bonus: Inserting Before or at a Specific Position

<p> Use insertBefore() or before() / after() for more control.

 const firstItem = ul.children[0];
ul.insertBefore(li, firstItem); // insert new li before the first item

<p> Or use before() to insert before a specific element:

 firstItem.before(li);

---

Key Takeaways

• Use document.createElement() to make a new element.
• Modify it (text, class, attributes) before or after creation.
• Use appendChild() or append() to add it to the DOM.
• append() is more modern and flexible; appendChild() is older but widely supported.

<p> Basically, create → customize → append. That's the flow.

以上是如何在JS中創建和附加元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！