JS创建Tag标签的方法详解

下面是针对“JS创建Tag标签的方法详解”的完整攻略。

1. document.createElement()方法

JavaScript中提供了 document.createElement() 方法，可以通过该方法创建指定的HTML标签元素。

语法格式如下：

    document.createElement(tagName);

其中 tagName 是字符串类型，表示要创建的标签名，例如：“div”、“p”等。

示例1：创建一个div元素

在页面中创建一个 div 元素，并将其添加到body中。

// 通过document.createElement()方法创建标签元素
let newDiv = document.createElement("div");

// 给标签添加属性
newDiv.id = "test";
newDiv.className = "box";
newDiv.innerHTML = "我是一个DIV元素";

// 将标签添加到body中
document.body.appendChild(newDiv);

代码说明：

• 第一步，调用 document.createElement("div") 方法，创建一个 div 元素。
• 第二步，给创建的 div 元素添加ID、CLASS、innerHTML等属性。
• 第三步，将创建的 div 元素添加到body中。

示例2：创建一个input元素

在页面中创建一个 input 元素，并将其添加到body中。

// 通过document.createElement()方法创建标签元素
let newInput = document.createElement("input");

// 给标签添加属性
newInput.type = "text";
newInput.id = "username";

// 将标签添加到body中
document.body.appendChild(newInput);

代码说明：

• 第一步，调用 document.createElement("input") 方法，创建一个 input 元素。
• 第二步，给创建的 input 元素添加type、ID等属性。
• 第三步，将创建的 input 元素添加到body中。

2. document.write() 方法

除了 document.createElement() 方法外，另外一种可以创建标签的方法是使用 document.write() 方法。

语法格式如下：

document.write("HTML元素内容");

其中 HTML元素内容 是字符串类型，表示要创建的HTMl标记。

示例3：创建一个h1标签

在页面中创建一个 h1 元素，并将其添加到body中。

document.write("<h1>Hello World</h1>");

代码说明：

将字符串 <h1>Hello World</h1> 作为参数传递给 document.write() 方法，创建一个 h1 元素。

注意事项：

需要注意的是， document.write() 方法只能用于页面加载时，如果在页面加载之后再使用该方法，会覆盖整个文档。

以上就是关于JS创建Tag标签的方法详解的完整攻略，包含了两个示例说明。