如何将javascript中的变量传递给HTML字符串

Question

我正在尝试将变量传递给内联JavaScript，但它无效。

var namealert = key;

     $("#alerta").append("<div class='alert_item clearfix'><a href='#' id='delete_alert' onclick='localStorage.removeItem('" +namealert+ "'');'><img width='15px' style='margin-right:10px;opacity: 0.5;' src='img/error.png'></a><div class='date'>"+obj['0']+"</div><br><div class='title'>"+obj['1']+"</div><br><div class='msg'>"+obj['2']+"</div><br><a href='#' id='candidatar' onclick='candidatar()'><img width='100px' style='margin-right:10px;opacity: 0.8;' src='img/disponivel.png'></a></div>");

输出结果为：

<a href="#" id="delete_alert" onclick="localStorage.removeItem(" alerts_1481117090'');'>...</a>

我需要localStorage.removeItem('alerts_1481117090');

Answer 1

很多人都对你进行了投票，但没有人真正给出了我们所说的添加事件处理程序＆＃34;的具体例子，因为从技术上来说，你使用的onclick方法是< / em>一个事件处理程序（这不是一个很好的方法来做你想做的事情）。

＆＃13;

＆＃13;

var $newElement = $("#alert")
		.append("<div class='alert_item clearfix'>Click me!</div>");
    
// $newElement is a jQuery object returned by .append()

// set a click event handler. this is much better than doing the html
// onClick method you had in your question, because it requires no
// stringified javascript code evaluation.

$newElement.on("click", function (ev) {
	alert("Hey, I was clicked! " + ev.target);
    // your local storage code here instead
});

  

＆＃13;

.alert_item {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="alert">
<!-- elements to append here -->
</div>

＆＃13;

＆＃13;

＆＃13;

你可能只是通过它的外观进入javascript，但不要气馁。它肯定是一种奇怪的语言，但是一旦你对事物的运作方式有了更多的了解，就会有一本名为"JavaScript, the Good Parts"的好书，讲述如何安全有力地使用该语言。