HTML DOM createElement() 方法

语法

createElement() 方法的语法如下：

document.createElement(tagName)

参数 tagName 是要创建的 HTML 元素的标签名，例如 "div", "p", "span" 等。

示例

让我们通过一个简单的示例来演示 createElement() 方法的用法。假设我们想要在一个 div 元素中动态地创建一个 button 元素，并将其添加到页面中。

// www.javascriptcn.com code example
// 创建一个新的 button 元素
var button = document.createElement("button");
button.innerHTML = "Click me";

// 找到要添加按钮的 div 元素
var div = document.getElementById("myDiv");

// 将新创建的 button 元素添加到 div 中
div.appendChild(button);

在这个示例中，我们首先使用 createElement() 方法创建了一个新的 button 元素，并设置了它的文本内容为 "Click me"。然后，我们通过 getElementById() 方法找到了一个 id 为 "myDiv" 的 div 元素，并使用 appendChild() 方法将新创建的 button 元素添加到这个 div 中。

注意事项

• 在使用 createElement() 方法创建新的 HTML 元素时，需要确保这个元素在被添加到页面之前已经设置好了所有需要的属性和内容。
• 可以通过 setAttribute() 方法为新创建的元素设置属性，例如 button.setAttribute("class", "btn")。
• createElement() 方法只是创建了一个新的元素对象，并没有将其添加到页面中。需要使用 appendChild() 方法或者其他 DOM 操作方法将其添加到页面中。

通过 createElement() 方法，我们可以在 JavaScript 中动态地创建各种 HTML 元素，从而实现更加灵活和动态的页面交互效果。希望本篇文章能帮助你更好地理解和运用 createElement() 方法。