문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM createElement() Method======
<WRAP left notice 80%>
  * description : Javascript HTML DOM createElement() Method
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-03
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article==== 
[[https://www.w3schools.com/jsref/met_document_createelement.asp|Javascript HTML DOM createElement() Method]]\\

====Example====
%%<button>%% 요소를 생성합니다.\\
<code javascript>
<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>
</code>
\\
%%HTML%% 요소에는 종종 텍스트가 포함됩니다. 텍스트가 있는 버튼을 만들려면, 요소 객체의 ''%%innerText%%'' 또는 ''%%innerHTML%%'' 속성을 사용합니다.\\

====Example====
텍스트가 있는 버튼을 생성합니다.\\
<code javascript>
<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>
</code>

=====Definition and Usage=====
%%createElement()%% 메서드는 지정된 이름을 가진 요소 노드를 만듭니다.\\
\\
**Tip:** 요소가 생성된 후 %%element.appendChild()%% 또는 %%element.insertBefore()%% 메서드를 사용하여 문서에 삽입합니다.\\

=====Syntax=====
<code javascript>
document.createElement(nodename)
</code>

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

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

=====More Examples=====
====Example====
텍스트가 있는 %%<p>%% 요소를 만들고, ''%%innerText%%''를 사용하여 텍스트를 설정한 다음, 문서에 덧붙입니다.\\
<code javascript>
<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>
</code>
\\

====Example====
%%<p>%% 요소를 생성하여 %%<div>%% 요소에 덧붙입니다.\\
<code javascript>
<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>
</code>
























{{tag>오션, Javascript HTML DOM createElement() Method}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
