變量值未附加在h2元素中

Question

演示

Hi, I have variable called "var node = "Hi Mr", Iam trying to append this value on click of a button, im  not sure why its not appending. 
I tried using html and text, none worked.

JS：

$(function(){
    $('.customerResultIndex').on('click',function(){
        openCustomerOverlay();
    })

});
function openCustomerOverlay(){
    var node = "Hi Mr"
    $('.customerPopHeading').text(node)

    var overlayContainer = 
    '<div class="customerOverlayShadow">'+
        '<div class="customerOverlay borderRadius10px">'+
            '<h2 class="customerPopHeading">-- </h2>'+

Answer 1

首先創建元素，然后創建元素，然后設置文本...您正在設置文本，然后再創建它。

把這個：

var node = "Hi Mr";
$('.customerPopHeading').text(node);

在這之后：

$(document).keyup(function(e) {
    if (e.keyCode == 27) {  
        $('.customerOverlayShadow').remove();   
    }
}); 

最終結果： http : //jsfiddle.net/pc2tx1us/3/

Answer 2

您不能附加這樣的值，而是可以通過以下方式將其連接：

'<h2 class="customerPopHeading">--'+ node +'</h2>'+

或者您可以移動以下行：

$('.customerPopHeading').text(node);

在此以下：

$("body").prepend(overlayContainer).focus();
$('.customerPopHeading').text(node);

小提琴

該元素必須可用於創建jQuery選擇器，此處僅當您在正文中開頭時，才可以在其中添加所需的文本。