HTML DOM div用法及代码示例

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，当用户点击时，它将执行 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);
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM div object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。