用js动态添加html元素,以及属性的简单实例

下面是详细的“用js动态添加html元素,以及属性的简单实例”的攻略:

1. 添加HTML元素

在HTML文档中，可以通过Javascript的代码来添加新的HTML元素，达到动态修改页面的目的。下面的例子展示了如何用javascript添加一个新的<div>元素，并将它添加到文档中：

// 创建一个div元素
var div = document.createElement("div");

// 设置该div元素的属性
div.setAttribute("id", "my-div");
div.setAttribute("class", "content");
div.innerHTML = "<p>这是一个新的div元素</p>";

// 将该div元素添加到文档的body中
document.body.appendChild(div);

说明：

• document.createElement(tagName)：动态创建一个指定的HTML元素。
• setAttribute(name, value)：动态设置一个指定的HTML元素的属性名称和属性值。
• innerHTML：动态设置指定元素的内容。
• appendChild(node)：将一个子节点添加到指定的父节点的末尾。

在上面的代码中，首先用document.createElement()方法创建了一个新的<div>元素，然后用setAttribute()方法动态设置了它的id和class属性，并用innerHTML属性设置了它的内容。最后，将该元素添加到文档的body中，用到了appendChild()方法。

2. 添加HTML元素属性

除了添加HTML元素和设置其属性值之外，我们还可以动态地为一个已经存在的HTML元素添加属性，下面的例子展示了如何为一个已经存在的<div>元素添加一个新的属性：

// 找到指定的div元素
var div = document.getElementById("my-div");

// 添加一个新的属性
div.setAttribute("style", "background-color: red; color: white;");

说明：

• document.getElementById(id)：通过元素的id属性获取指定的HTML元素。
• setAttribute(name, value)：动态设置一个指定的HTML元素的属性名称和属性值。
• style：一个包含元素行内样式属性的对象。

在上面的代码中，首先用document.getElementById()方法根据元素的id属性获取了指定的<div>元素，然后用setAttribute()方法动态地为它添加了一个新的属性style，并为该属性设置了具体的属性值，该属性值被设置为background-color: red; color: white;。 由于style属性返回的是一个对象，因此我们也可以使用类似于下面的方式单独设置style中的某个具体的属性：

// 动态修改已有元素的属性
div.style.backgroundColor = "green";

以上就是“用js动态添加html元素,以及属性的简单实例”的完整攻略，通过以上的攻略，你应该已经掌握了如何动态地添加HTML元素和属性的相关技巧。