JavaScript createElement|极客笔记

JavaScript createElement

介绍

在 JavaScript 中，createElement 方法是 Document 对象的一个方法，用于在 HTML 文档中创建一个指定的元素节点。这个方法可用于动态地向页面添加元素或者修改已有元素的内容。

createElement 方法的语法

createElement 方法的语法如下：

document.createElement(tagName)

其中，tagName 是一个字符串，表示要创建的元素的标签名。

创建元素

要创建一个新的元素，可以使用以下步骤：
1. 使用 createElement 方法创建一个新的元素节点；
2. 使用 appendChild 方法将新的元素节点添加到指定的父元素中。

下面是一个创建 <div> 元素并向文档添加的示例代码：

// 创建新的 div 元素
var newDiv = document.createElement("div");

// 向文档的 body 元素添加新的 div 元素
document.body.appendChild(newDiv);

元素属性

我们还可以设置创建的元素的属性，例如为元素添加 id、class、样式等。要设置元素的属性，可以使用以下步骤：
1. 使用 setAttribute 方法设置元素的属性。

下面是一个设置元素属性的示例代码：

// 创建新的 a 元素
var newLink = document.createElement("a");

// 设置 a 元素的 href 属性
newLink.setAttribute("href", "https://example.com");

// 设置 a 元素的文本内容
newLink.textContent = "This is a link";

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

运行上述代码后，将会在页面上添加一个链接，点击该链接将会打开 “https://example.com”。

添加文本内容

要向元素中添加文本内容，可以使用 textContent 属性。该属性可以设置或获取元素节点中的文本内容。下面是一个添加文本内容的示例代码：

// 创建一个新的 p 元素
var newParagraph = document.createElement("p");

// 设置 p 元素中的文本内容
newParagraph.textContent = "This is a paragraph.";

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

运行上述代码后，将会在页面上添加一个包含文字 “This is a paragraph.” 的段落。

元素样式

可以使用 style 属性来设置元素的样式。style 属性是一个对象，包含了一系列用于设置元素样式的属性，如颜色、字体大小、边框等。

下面是一个设置元素样式的示例代码：

// 创建一个新的按钮元素
var newButton = document.createElement("button");

// 设置按钮的样式
newButton.textContent = "Click me";
newButton.style.backgroundColor = "blue";
newButton.style.color = "white";

// 将按钮元素添加到文档的 body 元素中
document.body.appendChild(newButton);

运行上述代码后，将会在页面上添加一个蓝色背景、白色文字的按钮。