목차

Javascript HTML DOM createElement() Method

  • description : Javascript HTML DOM createElement() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-03


The source of the article

Javascript HTML DOM createElement() Method

Example

<button> 요소를 생성합니다.

<body>
 
  <p>Click the button to make a BUTTON element.</p>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var btn = document.createElement("BUTTON");
      document.body.appendChild(btn);
    }
  </script>
 
</body>


HTML 요소에는 종종 텍스트가 포함됩니다. 텍스트가 있는 버튼을 만들려면, 요소 객체의 innerText 또는 innerHTML 속성을 사용합니다.

Example

텍스트가 있는 버튼을 생성합니다.

<body>
 
  <p>Click the buton to make a BUTTON element with text.</p>
 
  <button onclick="myFunction()">Try it</button>
  <!-- 버튼을 클릭하면 CLICK ME 버튼이 생겨남 -->
  <script>
    function myFunction() {
      var btn = document.createElement("BUTTON");
      btn.innerHTML = "CLICK ME"
      document.body.appendChild(btn);
    }
  </script>
 
</body>

Definition and Usage

createElement() 메서드는 지정된 이름을 가진 요소 노드를 만듭니다.

Tip: 요소가 생성된 후 element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 문서에 삽입합니다.

Syntax

document.createElement(nodename)

Parameter Values

Parameter Type Description
nodename String 필수입니다. 생성하려는 요소의 이름

Technical Details

Return Value : 요소 객체이며, 생성된 객체 노드를 나타냅니다

More Examples

Example

텍스트가 있는 <p> 요소를 만들고, innerText를 사용하여 텍스트를 설정한 다음, 문서에 덧붙입니다.

<body>
 
  <p>Click the button to create a P element with some text.</p>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var para = document.createElement("P");/* Create a <p> element */
      para.innerText = "This is a paragraph.";/* Insert text */
      document.body.appendChild(para);  /* Append <p> to <body> */
      /* 버튼 아래에 This is a paragraph.가 생성됨 */
    }
  </script>
 
</body>


Example

<p> 요소를 생성하여 <div> 요소에 덧붙입니다.

<head>
  <style>
    #myDIV {
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  </style>
</head>
 
<body>
 
  <p>Click the button to create a P element with some text, and append it to DIV.</p>
 
  <div id="myDIV">
    A DIV element
  </div>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var para = document.createElement("P"); /* Create a <p> element */
      para.innerHTML = "This is a paragraph.";/* Insert text */
      document.getElementById("myDIV").appendChild(para);/* Append <p> to <div> with id="myDIV" */
    }
  </script>
 
</body>