Question

我正在尝试为我的模态创建HTML模板。我尝试向模板添加内容，但是当我返回内容值时，它会在模态体中打印NaN，而我似乎无法使用content.0访问该对象;
在＆＃39; getContent＆＃39; function我打算在内容变量中添加依赖于服务器响应的特定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 }

- [UPDATE] -

好的，我使用[0].outerHtml做了两个下面的建议似乎对jquery对象很有效，但是后来当我引用body来创建最终模板时我必须再次使用它。

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

 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;                  
}

＆＃13;

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

＆＃13;

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

＆＃13;

您不需要使代码变得复杂，您可以将其作为

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;                  
}

创建html模板并从函数

2 个答案: