cut and paste html to other element

Question

I need cut and paste text with all tags inside from main span to label element in every p tag.

<form>
    <p>
        <input...>  
        <label...>
        <span>Will trip the left<span>engin<span>e genge</span>rat</span>or only and connect external power to the left generator bus.
        </span>
    </p>
    <p>     
        <input ...>                                                                             
        <label></label><span>Will trip the left<span>engin<span>e genge</span>rat</span>or only and connect external power to the left generator bus.<br></span>
    </p>
    <input ...> 
</form>

I used this command:

$(document).find('form p').each( function(){ 
  $(this).find('span').detach().appendTo($(this).find('label'))
});

but i getting other spans outside that element. What am I doing wrong ?

i need something like this:

<form>
    <p>
        <input...>  
        <label>
            <span>Will trip the left<span>engin<span>e genge</span>rat</span>or only and connect external power to the left generator bus.
            </span>
        </label>
    </p>
</form>

Please use the `<>` button to edit the question and create a [mcve] - your HTML is not valid for example — mplungjan, Jan 21 '17 at 18:20
What are expected results? Also take a few minutes to read [ask] — charlietfl, Jan 21 '17 at 18:24
Try using right after `.find('span')`: `.each(function(){ $(this).detach... })`. You will need to store `$(this).find('label')` in a variable outside the `$.each` method. — Washington Guedes, Jan 21 '17 at 18:40

nmathews · Accepted Answer · 2017-09-02T19:09:25.057

1

You need to use the children method instead of the find method. The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. (see https://api.jquery.com/children/)

$(document).find('form p').each(function((){
  $(this).children('span').appendTo($(this).children('label'))
});

edited Sep 02 '17 at 19:09

answered Jan 21 '17 at 18:52

nmathews

36
4

1

No, the code has synax error. `.each(function({...})` should changed to `.each(function(){})` – Mohammad Jan 21 '17 at 18:54
using `detach()` is redundant... an element has to be detached to move it – charlietfl Jan 21 '17 at 19:21
Thanks guys. I have updated my answer and made both the corrections – nmathews Sep 02 '17 at 19:10

cut and paste html to other element

1 Answers1

Linked