"자바스크립트 cloneNode & appendChild"의 두 판 사이의 차이

2022년 4월 11일 (월) 11:01 기준 최신판

1 개요[ | ]

자바스크립트 cloneNode & appendChild

<div id="container">
  <div id="apple">Apple</div>
  <div id="banana">Banana</div>
</div>

<script>
const clone = document.getElementById("apple").cloneNode(true);
document.getElementById("container").appendChild(clone);
</script>

<div class="container">
  <div class="apple">Apple</div>
  <div class="banana">Banana</div>
</div>

<script>
const clone = document.getElementsByClassName("apple")[0].cloneNode(true);
document.getElementsByClassName("container")[0].appendChild(clone);
</script>

2 같이 보기[ | ]

@@ 2번째 줄: / 2번째 줄: @@
 ;자바스크립트 cloneNode & appendChild
-<syntaxhighlight lang='javascript' run>
+<syntaxhighlight lang='html' run>
 <div id="container">
    <div id="apple">Apple</div>
@@ 13번째 줄: / 13번째 줄: @@
 </script>
 </syntaxhighlight>
+<syntaxhighlight lang='html' run>
+<div class="container">
+  <div class="apple">Apple</div>
+  <div class="banana">Banana</div>
+</div>
+<script>
+const clone = document.getElementsByClassName("apple")[0].cloneNode(true);
+document.getElementsByClassName("container")[0].appendChild(clone);
+</script>
+</syntaxhighlight>
 ==같이 보기==
-* [[자바스크립트 cloneNode()
+* [[자바스크립트 cloneNode()]]
 * [[자바스크립트 appendChild()]]
 * [[jQuery clone()]]
 [[분류: JavaScript]]