JavaScript 創造元素 在進行前端設計的時候，我們經常需要在頁面上創建新的元素。由于 HTML 結構需要符合語義化，因此我們不能簡單地使用字符串拼接的方式來添加元素，這時便需要使用 JavaScript 來創建元素。 一、createElement 方法 我們可以使用 createElement 方法來創建元素節點。其基本語法如下： ``` var element = document.createElement(tagName); ``` 其中，tagName 參數必需，表示新創建的元素的標簽名稱，例如 "div"、"p" 等。 接下來，我們結合例子來詳細了解 createElement 的用法。 示例 1： ```

``` 我們需要在上面這個段落標簽里面添加一句話，代碼如下： ``` var para = document.createElement("span"); var node = document.createTextNode("Welcome to my website!"); para.appendChild(node); var element = document.getElementById("welcome"); element.appendChild(para); ``` 其中，我們需要先創建一個 span 標簽，再創建一個文本節點，并將其添加到 span 標簽里面。最后，我們找到要添加子節點的父節點（即 "welcome" 段落標簽），將新建的子節點添加進去。 這時，頁面上就會多出一段話："Welcome to my website!"。 示例 2： `````` 我們需要在上面這個 div 容器里面添加一個圖片元素，代碼如下： ``` var img = document.createElement("img"); img.setAttribute("src", "image.jpg"); img.setAttribute("alt", "A beautiful image"); var element = document.getElementById("container"); element.appendChild(img); ``` 其中，我們需要創建一個 img 標簽，并設置其 src 和 alt 屬性。然后，我們找到要添加子節點的父節點（即 "container" div 標簽），將新建的子節點添加進去。 這時，頁面上就會多出一張名為 "image.jpg" 的圖片。 二、insertBefore 方法 除了使用 appendChild 方法添加子節點外，我們還可以使用 insertBefore 方法在指定位置添加子節點。 其基本語法如下： ``` parent.insertBefore(newNode, existingNode); ``` 其中，parent 參數表示要添加節點的父元素節點，newNode 參數表示要添加的新元素節點，existingNode 參數表示要在其前面添加新元素節點的已存在的元素節點。 例如，需要在一個 ul 列表的第一個子元素前面添加一個新元素，代碼如下： ``` var newItem = document.createElement("li"); var textNode = document.createTextNode("New item"); newItem.appendChild(textNode); var list = document.getElementsByTagName("ul")[0]; var firstItem = list.childNodes[0]; list.insertBefore(newItem, firstItem); ``` 其中，我們創建了一個新的 li 元素，給其添加了一個文本節點，并將其添加到了 ul 列表的第一個元素前面。 三、outerHTML 屬性 如果想一次性地添加多個元素節點，我們可以先將它們都寫在一個字符串里，最后再通過 outerHTML 屬性將其添加到頁面上。 例如，需要創建一個新的 div 容器，其中包含一個 h1 標題和一個段落，代碼如下： ``` var content = ''; document.body.outerHTML += content; ``` 其中，我們把要添加的子節點都寫入了字符串 content 中，最后使用 outerHTML 屬性將其添加到了頁面上。這時，頁面上就會出現我們剛剛新建的 div 容器、h1 標題和段落。 綜上所述，JavaScript 創造元素有多種方法，根據具體需求進行靈活運用即可。