如何從jquery附加文本到div？

Question

我使用jQuery追加，但一旦你解決如有由Satpal建議所有的JS錯誤，它永遠不會在下拉列表

for (var key in data) 
{ 
    //alert(data[key]["type"] + data[key]["id"] + data[key]["message"]); 
    //$str = $str+; 
    $(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' user have created a meeting'</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n'); 
} 
<div class="dropdown-menu dropdown-menu-custom " > 
    <div class="notiDiv"> 

    </div> 
</div></li> 

Answer 1

顯示;你將需要以編程方式初始化引導下拉列表如下：

for (var key in data) 
{ 
    //alert(data[key]["type"] + data[key]["id"] + data[key]["message"]); 
    //$str = $str+; 
    $(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' user have created a meeting'</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n'); 
} 
$(".notiDiv").dropdown(); //re-init dropdowm once all options has been appended 

Answer 2

你已經在類名和\ n使用一些意想不到的空格，您應該刪除這些

您的代碼會像

$(".notiDiv").append('<div class="row" style="margin: 1px"><div class="col-sm-8"><a href="#!">user have created a meeting</a></div><div class="form-group col-sm-4 text-right" ><a href="#!"><span class=" glyphicon glyphicon-ok"></span></a><a href="#!" ><span class=" glyphicon glyphicon-remove"></span></a></div></div>'); 

Answer 3

您可以在這裏確認代碼，我爲你創建了一個示例

http://plnkr.co/edit/seRGvP?p=preview

$(document).ready(function() { 
    var data = { 
    "flammable": "inflammable", 
    "duh": "no duh" 
    }; 
    $.each(data, function(key, value) { 
    //alert(key + ": " + value); 
    $(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' + value + '</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n'); 
    }); 
}); 

或陣列

$(document).ready(function() { 
    var data = ['aaaaaaaaaaaa','bbbbbbbbbbbbbb','ccccccccccccc','dddddddddddd','eeeeeeeeeeee','ffffffffffffff','ggggggggggg','jjjjjjjjjjjj']; 
    $(data).each(function(index, value) { 
     //alert(index + ": " + value); 
     //$(".notiDiv").append(value); 
     $(".notiDiv").append('<div class="row" style="margin: 1px">\n\<div class="col - sm - 8">\n\<a href="#">' + value + '</a>\n\</div>\n\<div class="form - group col - sm - 4 text - right" >\n\<a><span class=" glyphicon glyphicon - ok"></span></a>\n\<a><span class=" glyphicon glyphicon - remove"></span></a>\n\</div>\n\</div>\n'); 
    }); 
});