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

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

====Example====
목록(list)에 항목(item)을 첨부합니다.\\
<code javascript>
<body>

  <ul id="myList">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>

  <p>Click the button to append an item to the end of the list.</p>

  <button onclick="myFunction()">Try it</button>

  <P><strong>Note:</strong><br>First create an LI node,<br> 
  then create a Textnode, <br> then append the Text node to the LI node. <br>
  Finally append the LI node to the list.</P>


  <script>
    function myFunction() {
      var node = document.createElement("LI");  /* First create an LI node, */
      var textnode = document.createTextNode("Water");  /* then create a Textnode,  */
      node.appendChild(textnode); /* then append the Text node to the LI node.  */
      document.getElementById("myList").appendChild(node);  /* Finally append the LI node to the list. */
    }
  </script>

</body>
</code>
\\

Before appending:\\
  * Coffee
  * Tea
\\

After appending:\\
  * Coffee
  * Tea
  * Water

=====Definition and Usage=====
%%appendChild()%% 메서드는 하나의 노드를 노드의 마지막 자식으로 추가합니다.\\
\\
**Tip:** 텍스트가 있는 새 단락(paragraph)을 만들려면, 단락에 추가하는 텍스트 노드로 텍스트를 만든 다음, 문서에 단락을 추가해야 합니다.\\
\\
이 메서드를 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다 ("추가 예제"참조).\\
\\
**Tip:** %%insertBefore()%% 메서드를 사용하여 지정된 기존 자식 노드 앞에 새 자식 노드를 삽입합니다.\\

=====Syntax=====
<code javascript>
node.appendChild(node)
</code>

=====Parameter Values=====
| Parameter  ^ Type         ^ Description                            ^
| node       | Node Object  | 필수입니다. 첨부하려는 노드 객체입니다.  |

=====Technical Details=====
Return Value: 첨부된 노드를 나타내는 노드 객체\\

=====More Examples=====
목록 항목(list item)을 한 목록에서 다른 목록으로 이동:\\

Before appending:\\
  * Coffee
  * Tea

  * Water
  * Milk
\\

After appending:\\
  * Coffee
  * Tea
  * Milk

  * Water

<code javascript>
<body>

  <ul id="myList1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="myList2">
    <li>Water</li>
    <li>Milk</li>
  </ul>

  <p>Click the button to move an item from one list to another.</p>

  <button onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      var node = document.getElementById("myList2").lastChild;
      /* myList2의 마지막 자식 요소 Milk를 변수 node에 대입 */
      document.getElementById("myList1").appendChild(node);
      /* id=myList1을 불러오고, myList2의 마지막 자식 요소 Milk를 자식 요소에 첨가한다. */
    }
  </script>
  
</body>
</code>
\\

====Example====
%%<p>%% 요소를 만들고 %%<div>%% 요소에 추가합니다.\\

<code javascript>
<style>
  #myDIV {
    border: 1px solid #000;
    margin-bottom: 10px;
  }
</style>

<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>

  <p><strong>Example explained:</strong><br>First create a P node,<br>
    then create a Text node,<br> then appendthe Text node to the P node. <br>
    Finally,get the DIV element with id="myDIV", and append the P node to DIV.</p>

  <script>
    function myFunction() {
      var para = document.createElement("P"); /* First create a P node */
      var t = document.createTextNode("This is a paragraph.");/* then create a Text node */
      para.appendChild(t);  /* then append the Text node to the p node */
      document.getElementById("myDIV").appendChild(para);
      /* Finally, get the DIV element with id="myDIV", and append the P node to DIV */
    }
  </script>

</body>
</code>

====Example====
일부 텍스트가 포함된 %%<p>%% 요소를 만들고, 그 요소를 문서 본문(body) 끝에 추가합니다.\\

<code javascript>

</code>


























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

사용자 도구

사이트 도구

문서 도구
