JQuery.append() - 如何在没有 ID 的情况下追加

Question

当我尝试创建一个完全 100% 动态的 PhoneJS 应用程序时，我遇到了 $().append().

的问题

我从 JQuery API 参考资料、其他 SO 和网络上的其他随机文章中看到的每个示例似乎总是将元素附加到特定 ID。

考虑以下因素：

HTML

<div id="something"></div>

JS

var tmp = $('<div></div>').SomeKindOfElement(WithSomeKindOfContent);

//People always append this to a specific element like so
$('#something').append(tmp);

如您所见，它被附加到一个特定的 ID。

现在，如果我不知道需要添加多少元素怎么办？我可以执行以下操作

<div id="something1"></div>
<div id="something2"></div>
<div id="something3"></div>
<div id="something4"></div>
<div id="something5"></div>

遍历我收到的任何项目，希望添加的元素不超过 5 个。

有没有办法让我添加新元素，而无需将它们绑定到我的 HTML 中的特定元素，而只需创建一个新的 <div> 元素？

仅限了解 DEVEXTREME 的人

基本上我是这样创建 dxChart 的：

$('#chart').dxChart({
    dataSource: [
        { 'Product': 'Pie', 'QTY': 25 },
        { 'Product': 'Chocolate Cake', 'QTY': 12 },
        { 'Product': 'Muffins', 'QTY': 78 }
    ],
    series: { name: 'Test', argumentField: 'Product', valueField: 'QTY'},
    commonSeriesSettings: {
        type: 'bar'
    }
});

但是如您所见，我将此图表绑定到标记中的 <div> 元素，其 ID 为 chart，如下所示：

<div data-options="dxView : { name: 'graph', title: 'graph' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <h1 class="headline">Dashboard</h1>
        <div id="chart"></div>
    </div>
</div>

但是，如果我要创建 2 个图表呢？第一个图表将被第二个图表覆盖。

Answer 1

您不需要指定 id，调用 var node = $("<div></div>") 将创建新的 div 元素并将其分配给 node 变量。然后您可以将节点附加到您想要的位置，例如像这样附加到主体：node.appendTo(document.body).

Answer 2

当您创建 tmp 对象时，它是一个 jQuery 对象，它是 "wrapping" 一个元素（div 在您的例子中）。

此 tmp 对象在创建时与 DOM 分离，它不会出现在 UI 中，直到您使用 .append(...) 将其注入页面功能。

为了将它注入页面，您需要指定 "where to" 注入它，您可以使用任何您想要的选择器来实现，无论它是 #id、.class 或直接到另一个 jQuery 对象使用 tmp.appendTo(existingElement)

Answer 3

我收到了 DevExtreme 支持的回复：

http://jsfiddle.net/tm481tew/ 示例演示了如何完成此任务

JAVASCRIPT

$('<div>')
.appendTo('#container')
.dxChart({
    dataSource: [
        { 'Product': 'Pie', 'QTY': 25 },
        { 'Product': 'Chocolate Cake', 'QTY': 12 },
        { 'Product': 'Muffins', 'QTY': 78 }
    ],
    series: { name: 'Test', argumentField: "Product", valueField: "QTY" },
    commonSeriesSettings: {
        type: 'bar'
    }
});

标记

<div id="container"></div>

JQuery.append() - 如何在没有 ID 的情况下追加

JQuery.append() - How to append without an ID

javascript

jquery

html

devexpress

devextreme