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

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

本文关键字：ID 情况下 追加 append JQuery      更新时间：2023-09-26

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

我从JQuery API参考，其他SO和其他随机文章中看到的每个例子，似乎总是将给定元素附加到特定的ID。

考虑以下内容:

<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>元素?

ONLY TO THOSE KNOWING 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>

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

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

当你创建你的tmp对象，它是一个jQuery对象，是"包装"一个元素(div在你的情况下)。

此tmp对象在创建时与DOM分离，并且在使用.append(...)函数将其注入页面之前，它不会出现在UI中。

为了将它注入页面，你需要指定"在哪里"注入它，你可以使用任何选择器，无论是#id, .class还是直接使用tmp.appendTo(existingElement)的另一个jQuery对象

我得到了DevExtreme Support的响应，答案是:

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>
相关文章：