[javascript] 동적 태그 추가

기존에 썼던 코드를 그대로 가져와서 적은거라 좀 장황한데

 

# 셈플1

function AddCareerLine(){
    var cnt = $('.career').length;
 
    // textarea 추가
    var nCareer = document.createElement("textarea");
    var sName = 'careerList['+ cnt +'].career';
    var sId = 'career'+cnt;
    nCareer.setAttribute("rows", 3);
    nCareer.setAttribute("cols", 120);
    nCareer.setAttribute("name", sName);
    nCareer.setAttribute("id", sId);
    nCareer.setAttribute("class", "career");
    document.getElementById("tchrCreear").appendChild(nCareer);
 
    // 줄바꿈
    var tagBr = document.createElement("br");
    document.getElementById("tchrCreear").appendChild(tagBr);
}
 
function DeleteCareerLine(){
    var cnt = $('.career').length;
 
    // textarea가 2개 이상인 경우 마지막 textarea를 삭제
    if (cnt > 1) {
        var sId = 'career' + (cnt-1);
        $('#'+sId).remove();
    }else {
        console.log('textarea count : 1');
    }
}

 

javascript로 만드는 건데

태그를 만들고 var nCareer = document.createElement("textarea");

태그의 속성을 지정한다 nCareer.setAttribute("rows", 3);

마지막으로 특정 태그 하위에 자식으로 넣어준다. document.getElementById("tchrCreear").appendChild(nCareer);

삭제는 jquery를 썼는데 이렇게 삭제한다. $('#'+sId).remove();

 

 

# 셈플2

// 재료 입력 div 추가
function addMaterialfrm(){
    
    var addIndex = $("#main_nextIndex").val();
    $("#main_nextIndex").val(Number(addIndex) + 1 );
 
    var addDivTag = "<div id='main_div_" + addIndex + "' style='margin-bottom: 5px;'>";
    addDivTag += "<input type='text' name='main[" + addIndex + "].mtrlNm' id='main[" + addIndex + "].mtrlNm' placeholder='재료명' style='width:250px;margin-right: 22px;'>";
    addDivTag += "<input type='text' name='main[" +addIndex + "].qty' id='main[" + addIndex + "].qty' placeholder='수랑' style='width:250px;margin-right:5px;'>";
    addDivTag += "<input type='hidden' name='main[" +addIndex + "].mtrlSeq' id='main[" + addIndex + "].mtrlSeq' value='0'/>";
    addDivTag += "<input type='hidden' name='main[" +addIndex + "].mtrlTp' id='main[" + addIndex + "].mtrlTp' value='main'/>";
    addDivTag += "<button type='button' class='btn btn-danger btn-sm' onclick='delMaterialfrm(`main`, " + addIndex +")'><i class='glyphicon glyphicon-minus'></i></button>";
    addDivTag += "</div>";
 
    $("#main_span").append(addDivTag);
 
}
// 재료 입력 div 삭제
function delMaterialfrm(id){
 
    var delDivId = "main_div_" + id;
    $("#"+delDivId).remove();
 
}

 

이건 그냥 스트링으로 하나하나 써서 만든 경우.

복잡해 보이지만 사실 간단한 내용으로 스트링으로 태그를 모두 작성하고

마지막에 jquery로 특정 태그 하위에 추가한다. $("#main_span").append(addDivTag);

 

* 관련글

[javascript, jquery] 동적 tag 추가시 이벤트 : https://deonggi.tistory.com/119