반응형
DOM
실습 코드
HTML
<body>
<h1>태그 추가하기</h1>
<button onclick="addAppend()">appendChild()실행</button>
<button onclick="addBefore()">insertBefore()실행</button>
<button onclick="moveEle()">appendChild()활용 요소이동</button>
<fieldset id="addEle">
<legend>부모태그</legend>
<div>태그</div>
</fieldset>
<fieldset id="addEle2">
<legend>이동할 요소박스</legend>
</fieldset>
</body>
1. appendChild(node객체)
자식요소들 중에 마지막 위치에 추가
appendChild("\<p> text\</p>") 불가
var p=document.getElementById("p");
var p=document.createElement("p");
div.appendChild(p);appendChild()실행 버튼 클릭시
<script type="text/javascript">
var count=0;
function addAppend(){
var fieldset=document.getElementById("addEle");
var p=document.createElement("p");//태그 객체 생성
// p.textContent="자식태그들 중 마지막에 붙여 넣는다";
var txt=document.createTextNode("자식태그들 중 마지막에 붙여 넣는다"+(count++));
p.appendChild(txt);
fieldset.appendChild(p);
}
</script>txt도 바로 넣어주기 보다는 수정을 위해 따로 변수에 담아둔다
2.insertBefore(새로운 node, 기존 node)
특정 엘리먼트 앞에 추가
function addBefore(){
var fieldset=document.getElementById("addEle");
var newP=document.createElement("p");
newP.textContent="엘리먼트 앞에 붙여넣기";
// var oldDiv=document.getElementsByTagName("div")[0];
var oldDiv=document.querySelectorAll("#addEle > div")[0];
fieldset.insertBefore(newP,oldDiv);
}
3.appendChild() 활용 요소 이동
function moveEle(){
var moveLast=document.getElementById("addEle").lastElementChild;
document.getElementById("addEle2").appendChild(moveLast);
}
기타 참고
- 객체.children
- innerHTML : HTML요소를 태그 내부에 추가(덮어씌우기)
- textContent : Text요소를 태그 내부에 추가(덮어씌우기)
- input태그는 입력을 안할시 공백처리
반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM탐색 속성 (0) | 2023.03.02 |
|---|---|
| (JavaScript)window객체-open,close (0) | 2023.02.28 |
| (JavaScript)날짜 객체 (0) | 2023.02.27 |
| (JavaScript)로또 (0) | 2023.02.27 |
| (JavaScript)함수 (0) | 2023.02.23 |