[JavaScript, jQuery] 객체 요소 추가 삭제 방법

- 자바스크립트와 제이쿼리에서 객체 추가 삭제

//특정위치에 추가

//===================

//JavaScript로 요소를 추가

function js_append1(){

//생성 , https://www.w3schools.com/jsref/dom_obj_all.asp

var ele = document.createElement("li");    //요소 생성

ele.classList.add("line1");        //클래스 배열에 추가

ele.setAttribute("value1", 1);    //속성 설정

ele.style.setProperty("color", "blue");    //스타일 설정

ele.textContent = "js-1";    //내용 설정

//추가

var obj = document.querySelector('#bar1 > ul');    //선택

obj.appendChild(ele);

//출력

var val1 = document.querySelector('#bar1 > ul > li');

console.log(val1.innerHTML, val1.outerHTML);

console.log( val1.textContent, val1.getAttribute("value1"));

}

//=========================

//한줄로 구현

var si =0;

function js_append2(){

si++;

//한줄로 가능

//document.querySelector('#bar1 > ul').innerHTML = '<li> 1 </li>';//원래 html이 전부 교체됨

//추가 가능

document.querySelector('#bar1 > ul').insertAdjacentHTML( "beforeend", '<li> ' +si + ' </li>');

/*

insertAdjacentHTML()의 위치 옵션

- 안

"afterbegin" (시작한 다음) - 해당 요소 '안'의 처음

"beforeend" (끝나기 전) - 해당 요소 '안'의 마지막 , appendChild()

- 밖

"beforebegin" (시작하기 전) - 해당 요소 '바깥'의 바로 전

"afterend" (끝난 다음) - 해당 요소 '바깥'의 바로 다음

*/

}

//======================

//jQuery로 추가

function jq_append1(){

/*

//요소(Element) 생성 //https://code.i-harness.com/en/q/418ca

var ele = $.parseHTML("<li></li>");    //jQuery로 요소 생성

$(ele).attr("value1",1);    //실제 코드로 추가

$(ele).prop("value2",2);    //실제로 코드로 나타나지는 않고 기능만

$(ele).css({ "color":"blue" , "border":"2pt dotted red" });    //스타일 설정

$(ele).text("jq-1");    //내용 설정

//추가

var obj = $("#bar1 > ul");

obj.append(ele);

*/

//한줄로 가능

$("#bar1 > ul").append('<li value1="1" style="color: red;">100</li>');

//출력

var val1 = $("#bar1 > ul > li");

console.log($(val1).html(), $(val1).parent().html());

console.log($(val1).text(), $(val1).parent().text());

console.log($(val1).attr("value1"), $(val1).prop("value2"));

}

//===============================================================

//특정위치에서 삭제

//JavaScript

function js_remove1(){

//var ele = document.getElementById("li0");

var ele = document.querySelector("#li0");

ele.parentElement.removeChild(ele);

//여러개

//var eles = document.getElementsByClassName("li1");

var eles = document.querySelectorAll(".li1");

for(var i=eles.length-1; 0<=i; i--){

eles[i].parentElement.removeChild(eles[i]);

}

}

//jQuery

function jq_remove1(){

$("#li0").remove();

$(".li1").remove();

}

</script>

//======================================================

<div id="bar2" class="bar line1" name="bar1">

<ul>

<li id="li0"> 0 </li>

<li class="li1"> cl-1 </li>

<li class="li1"> cl-2 </li>

<li class="li1"> cl-3 </li>

</ul>

</div>