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

Question

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

$('#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);
                    });
                });

    },
});

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

我需要在页面上创建一个 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"
},{
  ...
}]

如果您使用 $('

') 或 $('

; ') 要创建新元素，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 问题。

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

Answer 2

将标记放入 $() 的参数中以从中创建元素。使用 {} 查找中的值来设置属性和文本内容（在 jQuery 1.4 中）。例如。例如：

$('#event_data').append(
    $('<div class="event"/>', {id: 'event_'+key}).append(
        $('<span class="event-name"/>', {text: value.name})
        $('<span class="event-city"/>', {text: value.city})
        $('<span class="event-date"/>', {text: value.date})
    )
);

不要尝试自己将其粘在一起 ($(''+value.name+''))，否则您将遇到 HTML 编码问题可能还有跨站点脚本安全漏洞。