[FIXED] how to get an svg from one div element to another div element

Issue

I have been trying to append SVG as appending other HTML elements but except for the SVG element, all the other HTML elements append.

The following is the one I have tried

my original set of SVGs are dynamically created for a div for example

HTML:

<div id="div3">
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
    <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
    <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
</div>
<div id='slides'></div>

JavaScript:

var svgsiblings = $('#div3').children().siblings("svg");
var slides = document.getElementById( 'items2' );
var theDiv ="";
for (let i = 1; i < 10; i++) {
    if (currentcheck , currenttype,i) {
        var itemid = "check" + i;
        theDiv  += "<div class='item"
        theDiv  += " ' id='"
        theDiv  += currentcheck+'-'+itemid
        theDiv  += "'> "
        theDiv  += svgsiblings[i-1].outerHTML 
        theDiv  += " </div>";
    }       
}                                 
$('#items2').append(theDiv);

by the above JavaScript, I tried to append. but it only appends the HTML I have mentioned below with an empty space at the place where SVG required

the div tag with id #div3 may contain 10 different SVGs. so that I have looped it through a for loop up to 10,

The Output:

<div id='slides'>
     <div class='item' id='check1'>   </div>
     <div class='item' id='check2'>   </div>
     <div class='item' id='check3'>   </div>
     <div class='item' id='check4'>   </div>
     <div class='item' id='check5'>   </div>         
</div>

Expected Output:

 <div id='slides'>
    ​<div class='item' id='check1'> <svg><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg> </div>
    ​<div class='item' id='check2'> <svg><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg> </div>
    ​<div class='item' id='check3'> <svg><ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg> </div>
    ​<div class='item' id='check4'> <svg><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/></svg> </div>
    ​<div class='item' id='check5'> <svg><ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /><ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /></svg> </div>
 </div>

Solution

You're mixing jQuery with vanilla JS and while that's not a bad thing, it can be confusing. It's good for readability (and best-practices) to use one or the other.

$('#div3 svg').each(
   function(i) {
      $('#slides').append(
        $('<div>').append($(this))
                  .addClass('item')
                  .attr('id', `check${i+1}`))
   })

This loops through the svg elements in #div3, uses $.append() as a wrapper for the part that creates a div element and inserts $(this) (the svg) inside the new div. Outside of that wrapper, it applies the className and an id.

This moves the svg from it's original place into slides. If you wanted to copy it over to slides, you would make this small change:

...
$('<div>').append($(this).clone())
...

// and here's that in one line
$('#div3 svg').each(function(i) { $('#slides').append($('<div>').append($(this)).addClass('item').attr('id', `check${i+1}`))})

.item {
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div3">
  <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
  <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
  <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
</div>
<div id='slides'></div>

Answered By - Kinglish

Answer Checked By - Marilyn (PHPFixing Volunteer)