Question

我想稍后使用appendTo将以下代码添加到div的末尾。以下是代码最初的样子：

<div class="blah">
  <div class="foo">
    <div class="bar">
    </div>
  </div>
</div>

如您所见，元素嵌套精美。但是，当我将它们添加到我的Javascript中时，我将上述代码存储在变量中的唯一方法就是当我删除所有空格时，这会删除所有我精彩的嵌套和可读性：

var $addElem = $('<div class="blah"><div class="foo"><div class="bar"></div></div></div>');

正如您可以想象的那样，这使得管理难以理解。反正有吗？

谢谢！

编辑：它似乎不起作用。我试图将它附加到容器的末尾。这就是我所拥有的：

<script type="text/html" id="profile">
  <div class="fixed">
    <div class="inner">
    </div>
  </div>
</script>

这是我的javascript：

var $image = $('#profile').html();
$image.appendTo('#container');

Answer 1

一种选择是将标记粘贴在页面上的隐藏div中，然后通过jQuery从中提取。例如：

<div id="placeholder" style="display:none;">
    <div class="blah">
      <div class="foo">
        <div class="bar">
        </div>
      </div>
    </div>
</div>

<script>
    $addElem = $('#placeholder').html();
</script>

编辑：虽然以上是您的请求的快速而简单的解决方案，但为了回应评论中的@ d_r_w点，您可能希望尝试以下方法作为替代方案。这使您在使用完整模板渲染的过程中迈出了一步：

<script type="text/html" id="template">
    <div class="blah">
      <div class="foo">
        <div class="bar">
        </div>
      </div>
    </div>
</script>

<script>
    $addElem = $('#template').html();
</script>

浏览器将忽略脚本标记的内容，因为它们不知道如何处理它们。另一方面，根据您使用的编辑器，您可能也会失去颜色语法突出显示等。正如我之前所说，顶级解决方案可能是这种情况下最简单的方法，但我肯定会建议您更多地使用完整模板。我个人非常喜欢Knockout JS。

Answer 2

var $addElem = $('<div class="blah">' +
    '<div class="foo">' +
        '<div class="bar"></div>' +
    '</div>' +
'</div>');

或者你的结果是什么意思？根据需要添加\ r \ n和\ t。

Answer 3

您可以按如下方式对其进行嵌套和可读：

var $addElem = $($('<div>', {
    class: 'blah',
    html: $('<div>', {
        class: 'foo',
        html: $('<div>', {
            class: 'bar',
            html: 'whatever'
        })
    })
}));

$('body').append($addElem);

小提琴：http://jsfiddle.net/maniator/AMfrU/

Answer 4

不要删除空格？

var $addElem = $('<div class="blah">'
               + '  <div class="foo">'
               + '    <div class="bar">'
               + '    </div>'
               + '  </div>'
               + '</div>');

使用带有许多返回行的JQuery添加元素

4 个答案: