JavaScript에서 이스케이프 인용 부호가 작동하지 않습니다. innerHTML

Question

나는 지금 아주 나쁜 "인용 상황"이 있습니다. 나는 innerHTML을 내부에서 작업하고이 안에 난 다음 날 나뭇잎 온 클릭 이벤트에 함수를 호출 할 :

modalEl.innerHTML = '<form>'+ 
    '<legend>Gruppe bearbeiten</legend>'+ 
    '<div class="mui-textfield">'+ 
     '<input id="groupName" type="text" value="'+name+'">'+ 
     '<label>Gruppenname</label>'+ 
    '</div>'+           
    '<br/>'+ 
    '<div class="mui-textfield">'+ 
     '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+ 
     '<label>Beschreibung</label>'+ 
    '</div>'+           
    '<br/>'+ 
    '<div class="mui-textfield">'+ 
    '<label>Geräte hinzufügen</label>'+ 
    '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+ 
    '<option value="0"></option>'+ 
    '</select>'+ 
     '</div>'+ 
     '<br>'+ 
     '<div class="outterformbuttons">'+ 
     '<div class="formbuttons">'+ 
      '<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById(&quot;groupName&quot;).value, document.getElementById(&quot;groupDesc&quot;).value)">Speichern</button>'+ 
      '<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+ 
      '</div>'+ 
     '</div>'+ 
    '</form>'; 

내가 이미 따옴표를 탈출하고 HTML 따옴표를 사용하여 시도,하지만도 일했다.

Answer 1

작은 따옴표를 HTML 인코딩하는 대신 JavaString이 작은 따옴표를 이스케이프 처리합니다. HTML 속성으로

'<button type="button" class="mui-btn mui-btn--raised" 
    onclick="sendUpdatedGroup(id, document.getElementById(\'groupName\').value, 
    document.getElementById(\'groupDesc\').value)">Speichern</button>'+ 

당신이 탈출 지옥에 도착하지 않으려면

는 (우리는 약 10 년 전 일을 중지하는) 이벤트 핸들러를 사용하지 마십시오.

modalEl.innerHTML = '<form>'+ 
'<legend>Gruppe bearbeiten</legend>'+ 
'<div class="mui-textfield">'+ 
    '<input id="groupName" type="text" value="'+name+'">'+ 
    '<label>Gruppenname</label>'+ 
'</div>'+           
'<br/>'+ 
'<div class="mui-textfield">'+ 
    '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+ 
    '<label>Beschreibung</label>'+ 
'</div>'+           
'<br/>'+ 
'<div class="mui-textfield">'+ 
'<label>Geräte hinzufügen</label>'+ 
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+ 
'<option value="0"></option>'+ 
'</select>'+ 
    '</div>'+ 
    '<br>'+ 
    '<div class="outterformbuttons">'+ 
    '<div class="formbuttons">'+ 
     '<button type="button" class="mui-btn mui-btn--raised" >Speichern</button>'+ 
     '<button type="button" class="mui-btn mui-btn--raised">Abbrechen</button>'+ 
     '</div>'+ 
    '</div>'+ 
'</form>'; 

var buttons = modalEl.querySelectorAll('.formbuttons button'); 
buttons[0].addEventListener('click', function() { 
    sendUpdatedGroup(id, 
     document.getElementById('groupName').value, 
     document.getElementById('groupDesc').value)) 
}); 
buttons[i].addEventListener('click', deactivateOverlay); 

Answer 2

당신은 desc이 바이올린에 name 모습이 완전히 https://jsfiddle.net/L3Lfweh9/

는 HTML

<div id="message"> 

</div> 

<button id="bttn"> 
click here 
</button> 

JS

var name = "one"; 
var desc = "two"; 
var text = '<form>'+ 
    '<legend>Gruppe bearbeiten</legend>'+ 
    '<div class="mui-textfield">'+ 
     '<input id="groupName" type="text" value="'+name+'">'+ 
     '<label>Gruppenname</label>'+ 
    '</div>'+           
    '<br/>'+ 
    '<div class="mui-textfield">'+ 
     '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+ 
     '<label>Beschreibung</label>'+ 
    '</div>'+           
    '<br/>'+ 
    '<div class="mui-textfield">'+ 
    '<label>Geräte hinzufügen</label>'+ 
    '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+ 
    '<option value="0"></option>'+ 
    '</select>'+ 
     '</div>'+ 
     '<br>'+ 
     '<div class="outterformbuttons">'+ 
     '<div class="formbuttons">'+ 
      '<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById(&quot;groupName&quot;).value, document.getElementById(&quot;groupDesc&quot;).value)">Speichern</button>'+ 
      '<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+ 
      '</div>'+ 
     '</div>'+ 
    '</form>'; 

    document.getElementById("bttn").addEventListener("click", function(){ 
    document.getElementById("message").innerHTML = text; 
    }, false);