title: Change title of jQueryUI dynamically using queryselector
body: <p>I'm facing a problem regarding changing the title of a jQueryUI dialog box because I don't know how to select it with queryselector. I successfully replaced the text for the body but not for the title.</p>
  <p>Please check the code and let me know what should I enter in the querySelector in order to change the Lorem Ipsum of the title. Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $(".images").find("a").eq(1).on('click', function(e) {
      e.preventDefault();
      $("#texts").dialog({
        autoOpen: false,
        open: function(e) {
          $('body').addClass('modal');
        },
        close: function(e) {
          $('body').removeClass('modal');
        }
      });
      /*setTimeout(() =&gt; {
        //close dialogue
        /* $(dialog).dialog("close") */
        //redirect to new window
        //window.open($(this).prop("href"), "_blank"); //new window
        /*window.location.href = $(this).prop("href");
      }, 60000);*/
      $("#texts").dialog("open");
    });
  });
  
  const findUrl = "https://www.example.com/es/Pages/examplefr.html";
  
  const titles = {
    "en": "Title EN",
    "fr": "Title FR",
    "es": "Title ES"
  };
  
  const langs = {
    "en": "A very long text in English to replace existing text",
    "fr": "Je ne parle pas français",
    "es": "No hablo español."
  };
  
  if (!findLanguage()) console.log("The match was not found");
  
  //change content of the jQuery dialog box
  function findLanguage() {
    var result = /\.com\/(\w{2})\//.exec(findUrl);
    if (result &amp;&amp; result[1] in langs) {
      console.log("The text match has been found!");
      document.querySelector("#texts p").textContent = langs[result[1]];
      return true;
    }
  }
  //change the title of the jQuery dialog box
  function findTitleLanguage() {
    var results = /\.com\/(\w{2})\//.exec(findUrl);
    if (results &amp;&amp; results[1] in titles) {
      console.log("The title match has been found!");
      //querySelector for the title of jQueryUI dialog
      document.querySelector("what to insert here?").textContent = titles[result[1]];
      return true;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#texts {
    display: none;
  }
  
  img {
    width: 300px;
    height: 250px;
    object-fit: cover;
  }
  
  .modal {
    background-color: pink;
  }
  
  .modal:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- These scripts include the full jQuery UI --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src=""&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
  
  &lt;div class="modal-body"&gt;
    &lt;div class="images"&gt;
      &lt;a href="https://www.example.net"&gt;
        &lt;img src="https://images.pexels.com/photos/5214132/pexels-photo-5214132.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"&gt;
      &lt;a href="https://www.google.com/ncr"&gt;
        &lt;img src="https://images.pexels.com/photos/4995558/pexels-photo-4995558.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""&gt;
      &lt;/a&gt;
    &lt;div id="texts" title="Lorem ipsum"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.&lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>