HTML DOM div 对象

htmlweb developmentfront end technology更新于 2024/6/1 15:40:17

HTML DOM div 对象与 HTML <div> 元素关联。 div 是一个通用的块级元素，它允许我们将元素分组，以便对它们应用样式，或使用单个标签名称或 ID 来操作一组 HTML 元素。

属性

以下是 div 对象的属性 −

属性	描述
Align	设置或返回 <div> 元素的 align 属性值。 HTML5 不支持此属性，请使用 CSS 进行对齐。

语法

以下是语法 −

创建 div 对象 −

var p = document.createElement("DIV");

示例

让我们看一个 HTML DOM div 对象的示例 −

<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>click on the CREATE button to create a div element with some text in it.</p>
<button onclick="createDiv()">CREATE</button>
<script>
   function createDiv() {
      var d = document.createElement("DIV");
      var txt = document.createTextNode("Sample Div element");
      d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
      d.appendChild(txt);
      document.body.appendChild(d);
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击 CREATE 按钮 −

在上面的例子中 −

我们首先创建了一个 CREATE 按钮，当用户点击该按钮时，它将执行 createDiv() 方法 −

<button onclick="createDiv()">CREATE</button>

createDiv() 函数创建一个 <div> 元素并将其赋值给变量 d。然后，它会创建一个文本节点并将其赋值给变量 txt。之后，我们使用 setAttribute() 方法设置 <div> 元素的属性。之后，使用 appendChild() 方法将该文本节点附加到 <div> 元素。最后，<div> 元素和该文本节点一起作为文档主体子元素附加到该元素 −

function createDiv() {
   var d = document.createElement("DIV");
   var txt = document.createTextNode("Sample Div element");
   d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
   d.appendChild(txt);
   document.body.appendChild(d);
}