javascript - 我现在有一个 json 对象，如何使用元素制作 div

Question

我正在使用 getJson 将一些信息拉入页面

$('#request_song').autocomplete({
  serviceUrl: '<%= ajax_path("trackName") %>',
  minChars:1,
  width: 300,
  delimiter: /(,|;)\s*/,
  deferRequestBy: 0, //miliseconds
  params: { artists: 'Yes' },
onSelect: function(value, data){
    // alert('You selected: ' + value + ', ' + $('#request_artist').val()); 
        $.getJSON('/get_events', function(data) {
                    $(data).each(function(key, value) {
                        console.log(value);
                    });
                });

    },
});

json 将包含事件名称以及城市和日期

我需要在页面上创建一个 div，其中包含 json 中的值

<div id="event_data">

//table info from json 

Answer 1

我猜你的回答看起来像这样......

var data = [{
  "event": "Birthday"
  "name": "John Doe",
  "city": "Sunnyvale",
  "date": "04/07/1982"
},{
  ...
}]

如果您使用$('<div />')或$('<div></div>')要创建新元素，jQuery 将在创建元素之前使用正则表达式，如果您正在处理大型数据集，这显然会减慢您的速度。

用于性能用途:

var div = $(document.createElement('div'));

or keep it simple...

var div = document.createElement('div');

为了提高性能，请使用标准 for 循环，而不是 $.each，并缓存长度:

var container = $("#event_data");

for(var i = 0, k = data.length; i < k; i++){
  var event = $(document.createElement('div')),
      name = $(document.createElement('span')),
      city = $(document.createElement('span')),
      date = $(document.createElement('span'));

  // add id to event wrapper, if undefined generate random ID to avoid conflicts
  event.attr('id', 'event_'+data[i].event || Math.floor(Math.random()*100));

  // add each item, if undefined then insert empty text
  name.text(data[i].name || "").appendTo(event);
  city.text(data[i].city || "").appendTo(event);
  date.text(data[i].date || "").appendTo(event);

  // append & appendTo do exactly the same thing, markup preference
  container.append(event);
}

如果您使用text()，该值将被视为仅文本，并且不会被执行。如果您使用 html() 您将遇到 XSS 问题。

希望这对您有所帮助，并且正是您正在寻找的内容。