Question

我正在开发一个webapp来复制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);
}

在连接期间维护双引号

1 个答案: