在串聯期間維護雙引號

Question

我正在web應用程序上覆制onclick文本，但是JavaScript的方式是連接我的字符串，形成li html元素，它正在替代「」我的元素選擇器中''這是打破我的功能。我試圖用字符串轉義替換，但無濟於事。

我的評論html是一個工作函數的例子，我打算做的事情。

var responseList = [ 
 
    'Text', 
 
    'also text', 
 
    'Some text!', 
 
    'Some more text..' 
 
]; 
 
var concatHTML = ''; 
 
var concatHTML2 = []; 
 
function print(message, i) { 
 
    concatHTML += '\r<li>' + '<p id=\"p' + i + '\" onclick=\'copyToClipboard(\"#p' + i +"\')\'>" + message + "</p>\r"; 
 
    console.log(concatHTML); 
 
    document.getElementById("respUL").innerHTML = concatHTML; 
 
} 
 

 
for (var i = 0; i < responseList.length; i++) { 
 
    print(responseList[i], i); 
 
} 
 

 
function copyToClipboard(element) { 
 
    var $temp = $("<input>"); 
 
    $("body").append($temp); 
 
    $temp.val($(element).text()).select(); 
 
    document.execCommand("copy"); 
 
    $temp.remove(); 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<h1>Click & Paste</h1> 
 
    <h2>Making a list of things to click on then paste</h2> 
 

 
<ul id="respUL"> 
 
    
 
</ul> 
 
<!-- <p id="p1" onclick="copyToClipboard('#p1')">Text 
 
</p> 
 
<p id="p2" onclick="copyToClipboard('#p2')">Hi, I'm the 2nd TEXT</p><br/> --> 
 
</div>

Answer 1

應該很容易，如果你停止使用innerHTML和創建所需的DOM節點：

function print(message, i) { 
    var li = document.createElement('li'); 
    var p = document.createElement('p'); 
    p.id = i; 
    p.addEventListener('click', function(event) { 
     copyToClipboard("#p"+i); 
    }, false); 
    p.textContent = message; 
    li.appendChild(p); 
    document.getElementById("respUL").appendChild(li); 
}