JSFiddle - React, Tailwind, and code Playground

by vstuart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
  <h5>Titles</h5>
  <a id="documents_tab" href="https://example.com/">Example.com</a>
  <hr>
  <h5>Document</h5>
  <div id="documents_div"></div>
  <hr>
  <h5>Snippets</h5>
  <div id="snippets_div">
    <!-- <iframe id="preview_iframe"></iframe> -->
  </div><br />
  <h5>Other content</h5>
  <div>
    <p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim.</p>
  </div>
  <hr>
  Discussion: <a href=" https://stackoverflow.com/questions/71714212/targeting-textual-data-to-a-div-on-a-web-page">StackOverflow 71714212</a>
</body>

CSS

a {
  font-size: 12px;
}

h5 {
  margin: 0px;
}

iframe {
  width: 100%;
}

p {
  font-size: 12px;
  color: brown;
}

#snippets_div p {
  font-size: 11px;
  color: green;
}

JavaScript

var snippets = "<div><p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>.</p></div>";

$('a#documents_tab').on("click", function() {
  var url = $(this).attr('href');
  $('[id*=documents_div]').html('<iframe src="' + url + '" /></iframe>');
  return false;
});

$("a#documents_tab").on("click", function() {
  var url = $(this).attr("href");
  let ele = document.getElementById("snippets_div");
  ele.innerHTML = snippets;
  $("[id*=documents_div]").html(
    '<iframe src="' + url + "?txt=" + snippets + '" /></iframe>'
  );
  return false;
});