You will be given an HTML document, containing an article and a button. Some parts of the text will be highlighted with a <strong> tag. Write a JS function that receives a selector to the button and attaches an event to it. The event executes a function that finds all highlighted parts of the text and places them in a summary after the original article. The article will always be inside a div with ID 'content'.
The summary should be inside a div with ID 'summary', appended after the original article (at the end of its parent). The first element inside the div is a heading (<h2>) with the text 'Summary'. The second element is a paragraph (<p>), inside which are all the extracted parts from the original article. Note that you only need the text without the <strong> tags that originally surround it. See the example for more details.
HTML Skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summary</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
<div class="wrapper">
<div id="content">
<p><strong>The Theodor Pallady Museum </strong>is a museum situated in one of the oldest surviving merchant
houses in Bucharest, Romania. It <strong>includes many works by the </strong>well-known Romanian <strong>painter
Theodor Pallady</strong>, as well as a number of European and Oriental furniture pieces.</p>
</div>
<input type="button" id="generate" value="Generate Summary"/>
</div>
</body>
</html>
Sample Input 1:
<div class="holder">
<input type="button" id="generate" value="Generate Summary"/>
<div id="content">
<p><strong>Important text. </strong>Not too important. <strong>Also useful info.</strong></p>
</div>
</div>
Sample Output 1:
<div class="holder">
<input type="button" id="generate" value="Generate Summary"/>
<div id="content">
…
</div>
<div id="summary">
<h2>Summary</h2>
<p>Important text. Also useful info.</p>
</div>
</div>
Sample Input 2:
<div class="wrapper">
<div id="content">
<p><strong>The Theodor Pallady Museum </strong>is a museum situated in one of the oldest surviving merchant houses in Bucharest, Romania. It <strong>includes many works by the </strong>well-known Romanian <strong>painter Theodor Pallady</strong>, as well as a number of European and Oriental furniture pieces.</p>
</div>
<input type="button" id="generate" value="Generate Summary"/>
</div>
Sample Output 2:
<div class="wrapper">
<div id="content">
…
</div>
<input type="button" id="generate" value="Generate Summary"/>
<div id="summary">
<h2>Summary</h2>
<p>The Theodor Pallady Museum includes many works by the painter Theodor Pallady</p>
</div>
</div>
Screenshots:
