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 创造元素有多种方法，根据具体需求进行灵活运用即可。
My title
' + 'Content goes here
' + '