创建 html 模板并从函数中返回 NaN

Question

1. 我正在尝试为我的模式创建一个 HTML 模板。我试图向模板添加内容，但是当我返回内容值时，它会在模态正文中打印NaN，而且我似乎无法使用content.0 访问该对象；

2. 在“getContent”函数中，我打算在内容变量中附加依赖于服务器响应的特定 HTML 元素。这是实现这一目标的最佳方法吗？

Jquery/Javascript：

function getMessageTemplate(message, instance)
{
    var content = getContent(message);

    var body = 
    '<div class="modal-body msg-body">'+   
        + content +         
    '</div>';

    //more template code....
}

function getContent(message)
{
    var content = $('<div id="selections">'); 
    content.append('<div>message.stuff</div>');
    console.log(content)
    return content.0;                  
}

检查员：

 <div class="modal-body msg-body">NaN</div>

控制台：

 Object { 0: <div#selections>, length: 1 }

--[更新]--

好的，我使用[0].outerHtml 完成了以下两个建议似乎对 jquery 对象工作得很好，但后来当我引用 body 来创建最终模板时，我不得不再次使用它。

但是每次我想引用已附加的内容时，我真的需要使用它吗？有没有办法在不使其成为 jq-object 的情况下附加字符串？

 var content = getContent(message);
 var body = $('<div class="modal-body msg-body"></div>').append(content);

function getContent(message) 
{
   var $content = $('<div id="selections"></div>'); 
   $content.append('<div>message</div>');
   return $content[0].outerHTML; 
}

Answer 1

问题属于content.0; 行。使用dom对象的outerHTML属性，因为content是一个jQuery对象，你可以使用content[0]来获取dom对象。

function getContent(message)
{
    var content = $('<div id="selections">'); 
    content.append('<div>message.stuff</div>');
    console.log(content)
    return content[0].outerHTML;                  
}

var content = $('<div id="selections">');
content.append('<div>message.stuff</div>');
console.log(content[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

你不需要把代码弄得这么复杂，你可以这样做

function getMessageTemplate(message, instance) {
  var content = getContent(message);

  var body = $('<div/>', {
    class: "modal-body msg-body",
    html: content
  });

  // to get it as text use body = body[0].outerHTML;

  //more template code....
}

function getContent(message) {
  var content = $('<div/>', {
    id: "selections",
    html: $('<div/>', {
      text: message
    })
  });
  return content;
}

Answer 2

问题在于content.0 行。将包含#selections div 然后append() 返回到所需元素的jQuery 对象会是一个更好的模式。试试这个：

function getMessageTemplate(message, instance) {
    var $content = getContent(message);
    var $body = $('<div class="modal-body msg-body"></div>').append($content);

    //more template code....
}

function getContent(message) {
    var $content = $('<div id="selections"></div>'); 
    $content.append('<div>message.stuff</div>');
    return $content;                  
}