javascript - 如何在 div 上追加一个新的 div 并将 var 放入该新的 div 中

Question

我正在从 XML 获取数据并显示它，但如果我在新 div 中附加另一个带有 var 的 div，我会得到 [object Object] 而不是 XML 数据。我怎样才能在div中添加一个新的div加上var，这就是我想做的

$('#channels').append('<div id="logo">'+$(this).find("display-name")+'</div>');

下面是我使用的完整代码

<div class="channels" id="channels"></div>

var xml = "<tv generator-info-name='tvchannels' source-info-name='tvchannels'><channel id='1234'><display-name>Channel 1</display-name></channel><channel id='5678'><display-name>Channel 2</display-name></channel><channel id='543553'><display-name>Channel 3</display-name></channel><channel id='324324'><display-name>Channel 4</display-name></channel></tv>",

xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc );

$xml.find('channel').each(function (i,e) {

  $('#channels').append('<div id="logo">'+$(this).find("display-name")+'</div>');

});

Answer 1

$(...).find() 生成一个序列化为 [object Object] 的 jQuery 对象。您想要获取文本；为此，在对象上使用 text() 方法:

var xml = "<tv generator-info-name='tvchannels' source-info-name='tvchannels'><channel id='1234'><display-name>Channel 1</display-name></channel><channel id='5678'><display-name>Channel 2</display-name></channel><channel id='543553'><display-name>Channel 3</display-name></channel><channel id='324324'><display-name>Channel 4</display-name></channel></tv>",
  xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);

$xml.find('channel').each(function(i, e) {
  $('#channels').append('<div id="logo">' + $(this).find("display-name").text() + '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channels" id="channels"></div>