[JavaScript] 동적 Element 생성 시 함수 인자에 따옴표 추가하기(따옴표 안에 따옴표)

JavaScript를 통해서 동적 엘리먼트(element)를 생성 시에 함수 인자에 따옴표를 추가해야 하는 일이 종종 있다.

이럴 때 아래와 같은 방법으로 따옴표 안에 따옴표를 추가하였다.

---

결론부터 작성하자면 넣고자 하는 따옴표(') 앞에  \  를 붙여주는 것이다.

(ex : var text = '<input type="button" value="버튼" onclick="testing(\'' + text  + '\')" />';)

아래는 예시코드 이다.

1. HTML

<div>
    <button onclick="addElement()">동적 도큐먼트 생성하기</button>
    
    <div id="test"></div>
</div>

• button 을 클릭 시 test(div)에 element를 추가.

2. JavaScript

function addElement(){
    var text = "테스트";

    var str = '';

    str += '<h1>동적Element 생성하기</h1>';=
    str += '<input type="button" value="버튼" onclick="testing(\'' + text1  + '\', \'' + text2 + '\')" />';

    $("#test").append(str);
}

function testing(text1, text2){
    console.log(text1 + text2);
}

 

개발자 도구를 통해서 생성된 Element를 살펴보면

정상적으로 생성된 것을 확인 할 수 있다.

(생성된 버튼을 클릭하면 console.log에도 정상적으로 인자가 전달되는 것을 확인 할 수 있다.)