如何在html中注入div？

Question

I have a html string as follow:

<div data-field-id="ListFieldId1" data-field-type="ListField">
            <div id="1">
                <div>
                    some text
            </div>
            <img src="source" />
            <div>
                some text
            </div>
            <div>
                some text
            </div>
            <a href="link">click</a>
        </div>
    </div>

in my web page I have a button that when pressed the div part by id="1" should be injected to the main div with id="2" using jquery. I tried in this way that i have variable listHtml equals <div id="1">...</div> and listCount as default id. I tried to set a new id for listHtml in this way:

listHtml.attr('id', (listCount + 1).toString());

but this line doesn't work!

in fact after this work I want to append(listHtml) .

how can I fix it?

Is there any other way to inject a div tag to html?

thanks.

Answer 1

那应该完成$.('#1').append($('<div id="'+(listid+1)+'">...</div>'));

Answer 2

You have to create Jquery Object before you want to make change in any attribute of that element. Otherwise it treated it as simple string not an element.

For Example

var listHtml = '<div id="1">New Div</div> ';
var ele = $(listHtml);
ele.attr('id', (listCount + 1).toString()); //here you can make change in id attribute.    

May this will help you.

Here is JsFiddle Demo to add dynamic div.

Answer 3

I hope the following code lines may help you, if I understand your problem correctly.

Note: I have included "id" on divs etc for brevity and for quick readability.

<input id="btnAdd" type="button" value="Add Div" />
<div id="divMain" data-field-id="ListFieldId1" data-field-type="ListField">
    <div id="1">
        <div>
            some text
        </div>
        <img src="source" />
        <div>
            some text
        </div>
        <div>
            some text
        </div>
        <a href="link">click</a>
    </div>
</div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>
    $("#btnAdd").click(function () {
        var div = $("#divMain").children('div').last();
        var nextDivId = div.attr("id");

        var newDiv = div.clone();
        newDiv.attr("id", Number(nextDivId) + 1);
        $("#divMain").append(newDiv);
    });
</script>

Answer 4

function addNewDiv()
{
    $("#yourDiv").append('<div id="'+ listCount++ +'">Div "' + listCount  +'" </div>');   
}

Hope this helps