Question

Is it possible to use the Javascript method clone() to clone an mvc html element like dropdown list that is defined using a model?

I have a drop down list with options from a model; and I want to add a similar drop down list when the user clicks on a button. My drop down list is defined as

<div id="parent">
    <div id="id">
        @Html.DropDownListFor(m =>m.mymodel)
    </div>
</div>

I have added a code like this for my JS

var new = document.getElementById('id').cloneNode( true );
document.getElementById( 'parent' ).appendChild( new );

But this does not work.
If I cannot use cloning, how else can i achieve this?

Answer 1

You can’t use new as a variable name — that’s a reserved word in Javascript. Your approach should work, but just be aware that the id attribute has to be unique in an HTML document.