I am trying to create simplest presentation application in electron.js.
In the left bar I will display thumbnails of slides div#list_of_slides.
In the body preview of slide will be visible div#preview_of_slide
<html>
<head>
<title>My Presentation Application</title>
</head>
<body>
<div id="preview">
<div id="preview_of_slide">
<!-- Here slide will be displayed -->
</div>
<div id="popout_preview_to_new_window">
<!-- New window will open up showing bigger view of slide visilbe in div#preview_of_slide -->
<button>Popout</button>
</div>
</div>
<div id="list_of_slides">
<!-- These are slides whose thumbnails are displaying in this <div> -->
<!-- When user will click on specific thumbbnail then it will get displayed in div#preview_of_slide -->
<img src="slide_1.jpg"> <!-- Thumbnail of slide 1 -->
<img src="slide_2.jpg"> <!-- Thumbnail of slide 2 -->
<img src="slide_3.jpg"> <!-- Thumbnail of slide 3 -->
<img src="slide_4.jpg"> <!-- Thumbnail of slide 4 -->
<img src="slide_5.jpg"> <!-- Thumbnail of slide 5 -->
</div>
<script>
// Here javascript will make display of slide in div#preview_of_slide when user click on specific thumbnail
// More javascript to create popout window to display content of div#preview_of_slide in bigger size
</script>
</body>
</html>
I want to add functionality of popout preview to a new child window when use click on <button>. So the selected slide would be visible in div#preview_of_slide as well as in new child winodw(or popout window) in larger size.
How can I duplicate content of div#preview_of_slide into new popout child window in electron.js?