a태그 클릭 이벤트시 undefined 출력 채택완료

안녕하세요

a태그 onclick을 통해 스크립트를 호출하고 html태그를 추가하려고 하는데요

<a href="javascript:void(0);" onclick="saleLimitNationCodeAdd();" class="btn btn-add btn-blue btn-nation">추가</a>

a태그 버튼입니다 이 버튼을 클릭하면

function saleLimitNationCodeAdd(){

                var add;

                add += '<div class="input-group variable-option">';

                add += '    <select class="input">';

                add += '        <option>판매불가</option>';

                add += '    </select>';

                add += '    <span class="input-addbtn">';

                add += '        <a href="#none" class="btn btn-del btn-red">삭제</a>';

                add += '    </span>';

                add += '</div>';

                $('#tblsaleLimitNationCode').before(add);

            }

이 함수를 실행하려고 하는데요

before를 통해 앞에 html 태그를 생성하는건 되는데

생성된 태그 앞에 undefined가 출력됩니다

어떻게 해결해야 할까요