[JavaScript] append (스크립트단에서 문자열 생성 후 입력)

append 함수를 이용해서 스크립트단에서 HTML 코드를 생성 후 입력시켜보자

<script>
    function getMyList() {
        $("#ul_List *").remove(); //ul_List 하위 요소 제거
        var tmpHtml = "";
 
        tmpHtml += "<li>안녕</li>";
        tmpHtml += "<li>하세요</li>";
 
        $("#ul_List").append(tmpHtml);
    }
</script>
 
<ul id="ul_List"></ul>

getMyList 함수가 수행될 때 마다 append된 요소에서 계속 추가적으로 append 되기 때문에,

새로고침과 같이 $("#ul_List *").remove() 로 기존에 append된 ul_List 하위 요소를 제거 후 새롭게 추가해주자

예제

Ajax로 서버단에서 가져온 데이터를 활용하여, HTML로 작성 후 뿌려보자

[AjaxMethod()]
public DataTable testList()
{
    SqlParameter[] param = {
            new SqlParameter("@UserName",   SqlDbType.VarChar,  20),
            new SqlParameter("@Mode",       SqlDbType.VarChar,  20),
            new SqlParameter("@out_Return", SqlDbType.VarChar,  20)
           };
 
    param[0].Value = Page.User.Identity.Name;
    param[1].Value = "Test";
    param[2].Direction = ParameterDirection.Output;
 
    return (DataTable)cls_Global.cls_DBHelper.GetDataTableByProcedure("...", param);
}

<script>
    function getMyList() {
        if (test.testList != null) {
 
            var List = test.testList().value;
 
            if (List != null) {
                $("#ul_List *").remove(); //이전 append요소 제거
                var tmpHtml = "";
 
                for (var i = 0; i < List.Rows.length; i++) {
                    var row = List.Rows[i];
 
                    if (row.result == "Y") { //result컬럼의 결과가 Y일 경우
                        tmpHtml = tmpHtml + "<li>" + i + "</li>";
                    }
                }
 
                $("#ul_List").append(tmpHtml);
            }
        }
    }
</script>
 
<ul id="ul_List"></ul>