轉義Javascript字符串

Question

作為div覆蓋的一部分，我編寫了一些代碼來制作按鈕。 該函數接受一個對象

    function f1(marker){
    var notesBox = '<div id="saveMarkerNotesDiv'+marker.id+'"> <input type="button" onclick="saveMarkerNotes(\''+ marker+'\')" id="saveMarkerNotes'+marker.id+'" value="Save" /> </div>';
return notesBox;
    }

function saveMarkerNotes(marker){
 alert(marker);
//Just shows [object Object]
alert(marker.id);
//Above line throws an error as it cannot find id in the **string marker**. 
}

問題是為什么我逃脫后變成字符串。 另外我在以前的方法f1中使用了相同的對象，並且在這里工作正常。 調用上述f1函數時，它具有對象標記。 我可以在方法中訪問標記的屬性和屬性。

上面的函數f1具有標記對象。 但是，當調用函數saveMarkerNotes（）時，似乎不再具有該對象。 當我在saveMarkerNotes（）中打印marker.id時，它顯示未定義，而當我在警報中顯示標記對象時，它顯示為[object Object]。 我覺得在onclick =“ saveMarkerNotes（\\''+ marker +'\\'）”代碼中，標記對象正在變成字符串，不再是對象。 我該如何轉義字符串，以便它仍然是對象而不是字符串。

Answer 1

使用DOM API生成DOM元素（ <div>等），並使用Javascript以編程方式將事件處理程序附加到它們。 不要經歷將字符串解釋為HTML的串聯字符串，HTML會將元素附加到DOM，而DOM最終會再次從字符串觸發Javascript。

let input = document.createElement('input');
input.type = 'button';
input.id = 'saveMarkerNotes' + marker.id;
input.value = 'Save';
input.addEventListener('click', saveMarkerNotesDiv.bind(null, marker));

let div = document.createElement('div');
div.id = 'saveMarkerNotesDiv' + marker.id;
div.appendChild(input);

return div;

現在，您需要將.appendChild(div)添加到某個元素，以將其添加到頁面中。 是的，這似乎更加冗長和煩人，但這是正確的方法。