728x90
반응형
<태그 추가하기>
1. appendChild(): 부모태그에 자식 태그 추가
2. insertBefor(): 특정 기준점에 태그 추가
3. element이동
<body>
<body>
<h1>태그 추가하기</h1>
<button onclick="addAppend();">appendChild()</button>
<button onclick="addBefore();">insertBefore()</button>
<button onclick="moveElement();">appendChild를 이용한 element 이동</button>
<fieldset id="addele">
<legend>부모태그</legend>
<div>div태그1</div>
</fieldset>
</body>
<script>
<style type="text/css">
p{border: 1px solid blue;}
#test01, #test02{width: 300px; height:300px; border: 1px dashed pink;}
</style>
<script type="text/javascript">
function addAppend(){
var fieldset = document.getElementById("addele");
var p = document.createElement("p");
p.textContent = "자식 태그들 중 가장 마지막에 붙여넣는다.";
fieldset.appendChild(p);
}
var count = 0;
function addBefore(){
count++;
var p = document.createElement("p");
p.textContent = "기준점 앞에 붙여넣는다.";
var fieldset = document.getElementById("addele");
var div = document.querySelector("fieldset > div");
fieldset.insertBefore(p, div);
}
function moveElement(){
var moveEle = document.querySelector("fidlset").children[0];
var addEle = document.body;
addEle.appendChild(moveEle);
}
</script>
※ childNodes: 해당 childNodes안의 text를 모두 포함
※ children: text를 제외하고 안의 tag들만 포함
728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_row추가삭제 (0) | 2020.07.30 |
|---|---|
| [JS]DOM_getElement (0) | 2020.07.30 |
| [JS]DOM_img생성(연습) (0) | 2020.07.30 |
| [JS]DOM_element생성 (0) | 2020.07.30 |
| [JS]String (0) | 2020.07.28 |
