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

Question

As I'm trying to create a PhoneJS application that is completely 100% dynamic, I've encountered a problem with the $().append() .

Every example I've seen from the JQuery API reference, other SO's and other random articles on the web, ALWAYS seems to append and given element to a specific ID.

Consider the following:

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

As you see, it's being appended to a specific ID.

Now, what if I didn't know how many elements I needed to add? I could do the following

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

Loop through whatever items I receive, and hoping that no more than 5 elements needs to be added.

Isn't there a way for me to add new elements, without binding them to a specific element in my HTML, but simply create a new <div> element?

ONLY TO THOSE KNOWING DEVEXTREME

Basically I'm creating a dxChart like so:

$('#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'
    }
});

But as you see, I'm binding this chart to a <div> element in the markup, that has id of chart , like so:

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

But again, what if I were to create 2 charts? The first charts would be overridden by the second chart.

Answer 1

You do not need to specify id, calling var node = $("<div></div>") will create new div element and assign it to the node variable. Then you can append the node where you want, for instance to body like this: node.appendTo(document.body) .

Answer 2

When you create your tmp object, it is a jQuery object that is "wrapping" an element ( div in your case).

This tmp object is detached from the DOM when created, and it will not appear in the UI until you inject it to the page using the .append(...) function.

In order to inject it to the page, you need to specify "where to" inject it, and you can do it by using any selector you wish, whether it is an #id , .class or directly to another jQuery object using tmp.appendTo(existingElement)

Answer 3

I got response from the DevExtreme Support with this answer:

The http://jsfiddle.net/tm481tew/ example demonstrates how to accomplish this task

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

MARKUP

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