js动态创建标签示例代码

动态创建标签是Javascript中常用的技术之一，可以在不改变HTML结构的情况下来改变页面内容，增强用户交互性。以下是JS动态创建标签示例代码的完整攻略：

创建元素

通过 document.createElement(tagName) 方法创建一个HTML元素，tagName是想要创建的元素的标签名，如div、p、span等。

var div = document.createElement("div");

设置元素属性

我们可以使用 setAttribute() 方法来设置元素的属性。例如可以设置div标签的class属性。

div.setAttribute('class', 'new-div');

元素内容

使用 innerHTML 属性可以向标签添加文本或其他标签。

div.innerHTML = '我是一个新的div标签';

插入元素

使用 appendChild() 方法可以将元素插入到已存在的元素中。以下示例代码在 body 元素中添加了一个新的 div 元素。

document.body.appendChild(div);

示例1：创建一个按钮元素

创建一个按钮元素，设置按钮的ID和文本，然后将其插入到 body 元素中。

var button = document.createElement("button"); // 创建一个按钮
button.id = "my-button"; // 设置按钮的ID
button.innerHTML = "点击我";  // 设置按钮的文本

document.body.appendChild(button);  // 将按钮插入到body元素中

示例2：创建一个列表

创建一个有序列表（<ol>），然后向其中插入三个列表项（<li>）。

var ol = document.createElement("ol"); // 创建一个有序列表

var li1 = document.createElement("li"); // 创建第一个列表项
li1.innerHTML = "第一项"; // 设置列表项的内容
ol.appendChild(li1); // 将列表项插入有序列表中

var li2 = document.createElement("li"); // 创建第二个列表项
li2.innerHTML = "第二项"; // 设置列表项的内容
ol.appendChild(li2); // 将列表项插入有序列表中

var li3 = document.createElement("li"); // 创建第三个列表项
li3.innerHTML = "第三项"; // 设置列表项的内容
ol.appendChild(li3); // 将列表项插入有序列表中

document.body.appendChild(ol); // 将有序列表插入到body元素中

以上就是JS动态创建标签示例代码的完整攻略，以上示例代码只是介绍了基本的用法，应用更广泛的默认元素属性，CSS样式等内容可以根据实际需要进行扩展。