JavaScript appendchild(): 정의 및 사용 시기

14608 단어 reactprogrammingwebdevjavascript
이 튜토리얼은 Flexiple에서 자주 사용되거나 흥미로운 개념에 대한 짧은 큐레이트 튜토리얼을 작성하기 위한 이니셔티브의 일부입니다.

JavaScriptappendChild() 메서드는 새 노드를 삽입하거나 기존 노드를 특정 부모 노드의 마지막 자식으로 재배치하는 데 사용됩니다.

목차
  • Syntax of JavaScript appendChild
  • What is the JavaScript appendChild() method?
  • Key points to note: appendChild() method
  • JavaScript appendChild(): Examples
  • JavaScript appendChild() vs. append()
  • Objects that support appendChild()
  • Browsers that support appendChild()

    • JavaScript appendChild의 구문:

    parentNode.appendChild(childNode);

    The childNode is the node that we want to append to the parent node parentNode . appendChild() will return the appended child.

    JavaScript의 appendChild() 메서드는 무엇입니까?

    The JavaScript appendChild() is a method of the Node interface, used to append nodes (typically elements) at the end of a specified parent node. It can be executed on existing child nodes or by creating new elements:

    요소 만들기



    부모 노드 끝에 삽입할 새 요소를 만들려면 먼저 createElement를 사용하여 만든 다음 새로 만든 요소에 대해 appendChild()를 사용합니다.

    기존 요소


    appendChild() 메서드는 기존 자식 노드에서도 작동하며 이를 사용하여 문서 내의 새 위치로 이동할 수 있습니다. 이러한 경우 appendChild()는 특정 자식 노드를 현재 위치에서 지정된 부모 노드 아래의 자식 노드 목록 끝에 있는 새 위치로 이동합니다.

    다른 노드에 기존 자식 노드를 추가하기 위해 먼저 부모 노드에서 노드를 제거할 필요가 없습니다. 이는 동일한 문서 내에서 노드가 동시에 두 위치에 존재할 수 없기 때문입니다.

    따라서 appendChild()를 사용하여 기존 자식 노드를 다른 노드에 추가할 때 자식 노드가 먼저 제거된 다음 새 위치에 추가됩니다.

    JavaScript appendChild(): 예제

    1) 간단한 예




    // Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);


    2) appendChild() 메소드 사용 방법




    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to use JavaScript appendChild()</title>
</head>
<body>
    <ul id="userprofile">
    </ul>

    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#userprofile
        const userprofile = document.querySelector('#userprofile');
        // add the user profile items
        userprofile.appendChild(createMenuItem('Profile'));
        userprofile.appendChild(createMenuItem('Settings'));
        userprofile.appendChild(createMenuItem('Log out'));
    </script>
</body>
</html>


    3) appendchild()를 사용하여 동일한 문서 내에서 기존 요소를 이동하는 방법




    <ul id="list1">
    <li>Chocolate</li>
    <li>Ice-cream</li>
    <li>Candy</li>
</ul>

<ul id="list2">
    <li>Chips</li>
    <li>Smoothie</li>
    <li>Soda</li>
</ul>

// get list1
const firstList = document.querySelector('#list1');
// get the first child element
const chocolate = firstList.firstElementChild;
// get list2
const secondList = document.querySelector('#list2');
// append chocolate to list2
secondList.appendChild(chocolate)


    참고 사항: appendChild() 메서드

    • 'Appended' essentially means 'attach at the end'.
    • You can use cloneNode() to make a clone of the node before appending it under a new parent. However, remember that the copies of nodes made using cloneNode won't be updated automatically.
    • You cannot use the appendChild() method to append elements belonging to another document. For this, you'll first have to use importNode or adoptNode to import foreign elements, and then use appendChild() to insert them into the desired position.
    • You can use the removeChild method to remove a child from an element.

    JavaScript appendChild() 대 append()

    append() is a newer API that allows you to insert a set of DOMString objects (in addition to Node objects) as equivalent text nodes at the end of the list of child nodes of a parent node.

    추가() 구문




    parentNode.append()


    appendChild()와 append()의 차이점



    1. 노드 대 DOMString 객체



    Node 객체를 추가하고 추가된 Node 객체만 반환할 수 있는 parentNode.appendChild() 와 달리 parentNode.append() 또한 DOMString 객체를 추가할 수 있으며 반환 값이 없습니다.

    2. 단일 인수 대 다중 인수



    또한 parentNode.appendchild()는 하나의 노드만 추가할 수 있는 반면 parentNode.append()는 여러 인수를 지원하므로 여러 노드와 문자열을 추가할 수 있습니다.

    appendChild()를 지원하는 객체

    The following JavaScript objects support the appendChild() method:

    • attributedocument
    • DocumentFragment
    • XMLDocument

    The following HTML elements support the appendChild() method:

    <a>, <b>, <big>, <blockquote>, <body>, <button>, <center>, <code>, <dir>, <div>, <dl>, <em>, <font>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <html>, <i>, <img>, <label>, <li>, <menu>, <object>, <ol>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tfoot>, <th>, <thead>, <ul>, <var>, <xml>, <xmp>

    And many others...

    appendChild()를 지원하는 브라우저

    The following browsers support the appendChild() method:

    • Google Chrome
    • Mozilla Firefox
    • Safari
    • Microsoft Edge
    • Opera
     Read more about JavasCript appendchild on Mozilla's official Web Docs .
    Javascript를 사용하여 숫자의 제곱근을 얻는 방법은 무엇입니까?
    Améliorer votre Python: Maîtriser les Listes

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage