자바스크립트에서 동적으로 요소를 추가하는 데에 사용되는 메소드가 있다.
after()
append()
before()
prepend()
해당 요소와 어느 관계로서 추가를 할지에 따라 다르게 쓰인다!
The Element.before() method inserts a set of Node or string objects in the children list of this Element's parent, just before this Element. String objects are inserted as equivalent Text nodes.
Node 혹은 string 요소를 해당 요소의 앞쪽 형제 관계로 추가한다.
The
Element.after()
method inserts a set ofNode
or string objects in the children list of theElement
's parent, just after theElement
. String objects are inserted as equivalentText
nodes.Node 혹은 string 요소를 해당 요소와 뒤쪽 형제 관계로 추가한다.
The Element.prepend() method inserts a set of Node objects or string objects before the first child of the Element. String objects are inserted as equivalent Text nodes.
Node 혹은 string 요소를 해당 요소의 자식 관계로 추가한다. 가장 첫번째 자식이 된다.
The
Element.append()
method inserts a set ofNode
objects or string objects after the last child of theElement
. String objects are inserted as equivalentText
nodes.Node 혹은 string 요소를 해당 요소의 자식 관계로 추가한다. 가장 마지막 자식이 된다.
The
appendChild()
method of theNode
interface adds a node to the end of the list of children of a specified parent node.append()와 달리 string 요소를 추가할수 없!다!
append() VS appendChild()
Element.append()
allows you to also append string objects, whereasNode.appendChild()
only accepts[Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
objects.Element.append()
has no return value, whereasNode.appendChild()
returns the appended[Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
object.Element.append()
can append several nodes and strings, whereasNode.appendChild()
can only append one node.
코드로는 이렇게 사용할 수 있다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="wrap"></div>
<script src="./index.js"></script>
</body>
</html>
after
const $afterDiv = document.createElement("span"); $afterDiv.innerHTML = "after로 추가한 span"; $wrap.after($afterDiv);
append
const $appendDiv = document.createElement("span"); $appendDiv.innerHTML = "append로 추가한 span"; $wrap.append($appendDiv);
before
const $beforeDiv = document.createElement("span"); $beforeDiv.innerHTML = "before로 추가한 span"; $wrap.before($beforeDiv);
prepend
const $prependDiv = document.createElement("span"); $prependDiv.innerHTML = "prepend로 추가한 span"; $wrap.prepend($prependDiv);
let afterContainer = document.getElementById("afterContainer"); afterContainer.innerHTML = "afterContainer"; let afterDiv = document.createElement("span"); afterDiv.innerHTML = "after로 추가한 span"; afterContainer.after(afterDiv); console.log(afterContainer.outerHTML); let appendContainer = document.getElementById("appendContainer"); appendContainer.innerHTML = "appendContainer"; let addDiv = document.createElement("span"); addDiv.innerHTML = "append로 추가한 span"; appendContainer.append(addDiv); console.log(appendContainer.outerHTML); let appendChildContainer = document.getElementById("appendChildContainer"); appendChildContainer.innerHTML = "appendChildContainer"; let childDiv = document.createElement("span"); childDiv.innerHTML = "appendChild로 추가한 span"; appendChildContainer.appendChild(childDiv); console.log(appendChildContainer.outerHTML); console.dir(appendChildContainer);