HTML - DOM createElement() 方法

HTML DOM 的createElement() 方法用於建立由標籤名稱或元素名稱指定的 HTML 元素，如果標籤名稱不被識別，則會建立一個 HTML 未知元素。

以下互動式示例演示了createElement() 方法在不同場景下的用法：

HTML DOM createElement() 方法 - 技術教學

歡迎來到 Tutorialspoint

您來對地方學習了……訪問了解更多

如果您點選“建立 p 元素”按鈕，將建立一個新的<p>元素。
如果您點選“建立列表”按鈕，將建立一個新的“列表”元素。
如果您點選“建立按鈕元素”按鈕，將建立一個新的“按鈕”元素。

語法

以下是 HTML DOM 的createElement() 方法的語法：

document.createElement(tagname);

引數

此方法接受一個引數，如下所示：

引數	描述
tagname	這是一個必需引數，表示要建立的元素型別。

返回值

它返回新建立的元素節點。

示例 1：建立“按鈕”和“hr”元素

以下示例演示了 HTML DOM 的createElement() 方法的用法。它在文件中建立“按鈕”和“hr”元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more buttons</p>
<button onclick="fun()">Click me</button><br><br>
<script>
   let i = 0;
   function fun() {
      i++;
      let btn = document.createElement("button");
      btn.innerHTML = "button" + i;
      let hr = document.createElement("hr");
      document.body.appendChild(btn);
      document.body.appendChild(hr);
   }
</script>
</body>
</html>

示例 2：建立段落 (“p”) 元素

以下是 HTML DOM 的createElement() 方法的另一個示例。我們使用此方法建立一個“p”元素，然後將其附加到<body>：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
   <p>Click to get more Paragraphs</p>
   <button onclick="fun()">Click me</button><br><br>
   <script>
      let i = 0;
      function fun() {
         i++;
         let txt = document.createElement("p");
         txt.innerHTML = "I am Paragraph number " + i;
         document.body.appendChild(txt);
      }
   </script>
</body>
</html>

示例 3：建立段落 (“p”) 元素並附加到<div>

在以下示例中，使用createElement() 方法建立了一個<p>元素，然後將其附加到<div>元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more Paragraphs</p>
<button onclick="fun()">Click me</button><br><br>
<div id="ids"></div>
<script>
   let i = 0;
   function fun() {
      i++;
      let txt = document.createElement("p");
      txt.innerHTML = "I am Paragraph number " + i;
      document.getElementById("ids").appendChild(txt);
   }
</script>
</body>
</html>

支援的瀏覽器

方法
createElement()	是 1	是 12	是 1	是 1	是 6

html_dom_document_reference.htm

列印頁面