<AI>
マウスでクリックしたHTML要素の内容を iframe に表示するには、
iframe の srcdoc 属性（または contentDocument）に、その要素の outerHTML を書き込みます。
実装コード例
html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"<
  <title>要素をiframeに表示</title>
  </head>
<body>
  
  <div class="pickable" style="padding: 10px; background: #eee; cursor: pointer;">
    <h2>選んだ見出し</h2>
    <p>この段落のテキストがiframeに表示されます。</p>
  </div>

  <div class="pickable" style="padding: 10px; background: #ddd; cursor: pointer; margin-top: 10px;">
    <h3>別の要素</h3>
    <p>違う内容のボックスです。</p>
  </div>

  
  <iframe id="my-iframe" style="width: 100%; height: 150px; margin-top: 20px;"></iframe>

  <script>
    // 1. クラス「pickable」の要素をすべて取得する
    const items = document.querySelectorAll('.pickable');
    const iframe = document.getElementById('my-iframe');

    // 2. 各要素にクリックイベントを登録する
    items.forEach(item => {
      item.addEventListener('click', () => {
        // 3. クリックした要素のHTMLを取得
        const content = item.innerHTML;

        // 4. iframe内のドキュメントを取得して書き込む
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write('<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + content + '</body></html>');
        iframeDoc.close();
      });
    });
  </script>
</body>
</html>

ポイント
 
 outerHTML: タグ自身を含む要素全体のHTML文字列を取得します。
 srcdoc: iframe タグの中に直接HTMLソースを流し込むための属性です。
 外部ファイルを読み込む必要がないため、クリックした要素をその場ですぐ表示できます。