如何将json文件转换为HTML而不首先将它们添加到元素中

How do I convert json file into HTML without adding them into an element first?

本文关键字：添加 元素 文件 json 转换 HTML      更新时间：2023-09-26

在jQuery的网站上有一个文档说，

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

对于那些使用过这种方法的人来说，它将所有json属性添加到名为"itemams"的变量中，然后通过将字符串添加到一个名为"my-new-list"的新无序列表中，将"items"转换为html。

现在，假设我不想用一个名为"my-new-list"的类添加一个新的无序列表，相反，我想将新变量转换为字符串并添加到一个现有的HTML元素中，比如用一个名为"curtain"的类，我该怎么做呢?

这是我的尝试:

var items = [];
var first = '<div class="panel"><div class="panel-gallery"><img src="',
    second = '" Alt=""></div></div>';
$.each( data, function( url ) {
    items.push( first + url + second );
    html: items.join( "" ).appendTo( ".curtain" );
});

显然这会给我一个错误:

html: items.join( "" ).appendTo( ".curtain" );

它给你一个错误，因为它不是一个有效的语法，因为你把它放在一个函数中，而不是一个散列。如果物品。Join返回html，只需删除"html:"并执行以下操作:

$(items.join( "" )).appendTo( ".curtain" );

用最简单的方式回答你的问题，这是不可能的。

为什么?

文档如下:http://www.w3schools.com/jquery/html_html.asp

简而言之，jQuery中的.html()方法必须有一个"选择器"。"

这意味着，你必须有一个选择器来允许对象被转换成。

你有三种方法来实现你的目标。

如果你不想扩展你的变量"items"，你可以简单地把它从代码中拿出来，然后使用: 
$('.yourClass').append(XXX);

看起来你失败了。这是因为将字符串挂载到DOM树会在javascript引擎的第一个进程中循环，你可以使用load方法，但你仍然可能失败。所以你必须使用方法2或方法3。

2)利用'。为空，然后:

$('.yourClass').html(XXX);

现在这很方便，但是，您可能没有空的'。yourClass"所以…

3)创建一个新类，命名为"。newclass": 
$( "<div/>", {
    "class": "newClass",
    html: items.join( "" )
  }).appendTo( "body" );

现在取'的所有子元素。并将它们附加到'.yourClass':

$(".newClass").children().appendTo(".yourClass");

最后，删除'. newclass '。

$(".newClass").remove();

困难?是的。这是必须的。对不起朋友。

相关文章：