blocks|key|1330491|text|通过使用您的代码，您可以使用cloneNode()方法在普通的JavaScript中执行类似以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1330492|//+Create+a+clone+of+element+with+id+ddl_1:
let+clone+=+document.querySelector('#ddl_1').cloneNode(+true+);

//+Change+the+id+attribute+of+the+newly+created+element:
clone.setAttribute(+'id',+newId+);

//+Append+the+newly+created+element+on+element+p+
document.querySelector('p').appendChild(+clone+);|code-block|syntax|javascript|1330493|或者使用jQuery+clone()方法(不是最有效的)：|1330494|$('#ddl_1').clone().attr('id',+newId).appendTo('p');+//+append+to+where+you+want|1330495|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode|1|http://docs.jquery.com/Manipulation/clone^0|E|B|0|0|0|B|7|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Using your code you can do something like this in plain JavaScript using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode" rel="noreferrer">cloneNode()</a> method:

<pre><code>// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );
</code></pre>

Or using jQuery <a href="http://docs.jquery.com/Manipulation/clone" rel="noreferrer">clone()</a> method (not the most efficient):

<pre><code>$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want
</code></pre>

blocks|key|1545766|text|在jQuery中，这实际上非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1545767|$("#ddl_1").clone().attr("id",newId).appendTo("body");|code-block|syntax|javascript|1545768|当然，更改.appendTo()+...|1545769|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It's actually very easy in jQuery:

<pre><code>$("#ddl_1").clone().attr("id",newId).appendTo("body");
</code></pre>

Change .appendTo() of course...

blocks|key|1545789|text|在一行代码中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1545790|$('#selector').clone().attr('id','newid').appendTo('#newPlace');|code-block|syntax|javascript|1545791|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In one line:

<pre><code>$('#selector').clone().attr('id','newid').appendTo('#newPlace');
</code></pre>

blocks|key|1330585|text|使用原生JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1330586|newelement+=+element.cloneNode(bool)|code-block|syntax|javascript|1330587|其中布尔值指示是否克隆子节点。|1330588|Here+is+the+complete+documentation+on+MDN。|offset|length|1330589|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode^0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

With native JavaScript:

<pre><code>newelement = element.cloneNode(bool)
</code></pre>

where the Boolean indicates whether to clone child nodes or not.

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode" rel="noreferrer">Here is the complete documentation on MDN</a>.

blocks|key|1545866|text|可以，您可以复制一个元素的子元素并将其粘贴到另一个元素中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1545867|var+foo1+=+jQuery('#foo1');
var+foo2+=+jQuery('#foo2');

foo1.html(foo2.children().clone());|code-block|syntax|javascript|1545868|证据：http://jsfiddle.net/de9kc/|offset|length|1545869|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/de9kc/^0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Yes, you can copy children of one element and paste them into the other element:

<pre><code>var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());
</code></pre>

Proof: <a href="http://jsfiddle.net/de9kc/">http://jsfiddle.net/de9kc/</a>

blocks|key|1330628|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1330629|$('#foo1').html($('#foo2').children().clone());|code-block|syntax|javascript|1330630|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>$('#foo1').html($('#foo2').children().clone());
</code></pre>

blocks|key|1545911|text|您需要选择"#foo2“作为选择器。然后，使用html()获取它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1545912|下面是html：|1545913|<div+id="foo1">

</div>
<div+id="foo2">
++++<div>Foo+Here</div>
</div>​|code-block|syntax|javascript|1545914|下面是javascript：|1545915|$("#foo2").click(function()+{
++++//alert("clicked");
++++var+value=$(this).html();
++++$("#foo1").html(value);
});​|1545916|这是jsfiddle：http://jsfiddle.net/fritzdenim/DhCjf/|offset|length|1545917|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fritzdenim/DhCjf/^0|0|0|0|0|0|B|11|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

You need to select "#foo2" as your selector. Then, get it with html().

Here is the html: 

<pre><code>&lt;div id="foo1"&gt;

&lt;/div&gt;
&lt;div id="foo2"&gt;
 &lt;div&gt;Foo Here&lt;/div&gt;
&lt;/div&gt;​
</code></pre>

Here is the javascript: 

<pre><code>$("#foo2").click(function() {
 //alert("clicked");
 var value=$(this).html();
 $("#foo1").html(value);
});​
</code></pre>

Here is the jsfiddle: <a href="http://jsfiddle.net/fritzdenim/DhCjf/" rel="nofollow">http://jsfiddle.net/fritzdenim/DhCjf/</a>

blocks|key|1330723|text|使用普通的JS方法实现您想要做的事情|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1330724|const+oldDdl+=+document.querySelector('#ddl_1');

const+newDdl+=+oldDdl.cloneNode(true);

oldDdl.setAttribute('id','newId');

const+oldDdlHtml+=+oldDdl.innerHTML;|code-block|syntax|javascript|1330725|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Vanilla JS approach on what you are trying to do
<pre><code>const oldDdl = document.querySelector('#ddl_1');

const newDdl = oldDdl.cloneNode(true);

oldDdl.setAttribute('id','newId');

const oldDdlHtml = oldDdl.innerHTML;
</code></pre>

I have a html element (like select box input field) in a table. Now I want to copy the object and generate a new one out of the copy, and that with JavaScript or jQuery. I think this should work somehow but I'm a little bit clueless at the moment.
Something like this (pseudo code):
<pre><code>oldDdl = $(&quot;#ddl_1&quot;).get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
</code></pre>

Is it possible to clone html element objects in JavaScript?

我在一个表中有一个html元素(比如选择框输入字段)。现在我想复制对象，并用JavaScript或jQuery从副本中生成一个新对象。我认为这应该会起作用，但我现在有点不知所措。类似这样的代码(伪代码)：oldDdl = $("#ddl_1").get(); newDdl = oldDdl;oldDdl.attr('i...

问可以在JavaScript中克隆html element对象吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在JavaScript中克隆html element对象吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在JavaScript中克隆html element对象吗？
EN