Targeting textual data to a DIV on a web page?-CodePudding

I have a web page - index.html on a localhost webserver - split horizontally via DIV elements and a CSS stylesheet into upper / lower panes.

Titles (hyperlinked to source HTML documents) appear in the upper split.

<div id="titles"></div>

Task 1. When I click a hyperlinked title, the output is targeted to a DIV on index.html. That is working well.

Task 2. Additionally, when I click that link I want to send selected text ("snippets") to a separate DIV on index.html.

I am particularly interested in well-coded solutions to the second task.

Here is a simplified example, illustrating the tasks.

Update. Based on the accepted answer, here is the updated example (working).

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;
});

a {
  font-size: 12px;
}

h5 {
  margin: 0px;
}

iframe {
  width: 100%;
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h5>Titles</h5>
  <a id="documents_tab" href="https://example.com/">Example.com</a>
  <hr>
  <h5>Documents</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>
</body>

JSFiddle: https://jsfiddle.net/vstuart/47srd1bc/128/

CodePudding user response：

There are multiple ways to achieve this. But one of the simplest way is below.

In your example you are sending the target to an iframe. And you also want to send additional data(snippets) to the same iframe if I understood it correctly.

To pass additional data which is the snippets, you can do that by passing as url params like below.

var snippets = "<div><p>bananas; <b>carrots</b></p></div>";

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

To read and append that data inside the frame, you need to add few lines of javascript and html in index.html as below.

HTML

<h3>Snippets</h3>
    <div id="snp"></div>

JavaScript

let params = new URL(document.location).searchParams;
      let txt = params.get("txt");
      document.querySelector("#snp").innerHTML = txt;