title: Change button's text in JS without div.class
body: <p><strong>THE PROBLEM</strong></p>
  <p>I've some hard time to change a button's text on my website.</p>
  <p>There isn't a class on the <code>&lt;div&gt;</code> that I want to target and that's why I'm struggling with this edit.
  To be honest, I've some basic knowledge of JS, so I can understand it, but I'm not good enough yet to find this solution myself.</p>
  <p>There is the simplified code of the page :</p>
  <pre><code>&lt;div class=&quot;notion-topbar&quot;&gt;
    &lt;div&gt;
      &lt;div class=&quot;notranslate&quot;&gt;...&lt;/div&gt;
      &lt;div&gt;...&lt;/div&gt;
      &lt;div role=&quot;button&quot;&gt; // I want to change the text in this &lt;div&gt;!
        &lt;svg&gt;...&lt;/svg&gt; my_text
      &lt;/div&gt;
  </code></pre>
  <p>If you prefer, you can watch the full page here and search &quot;topbar&quot;: <a href="https://overwatch-guide.com" rel="nofollow noreferrer">https://overwatch-guide.com</a>
  I want to translate in French the &quot;Search&quot; button on top right.</p>
  <p><strong>POTENTIAL SOLUTIONS</strong></p>
  <p>I maybe find a part of the solution, like using <code>document.querySelector('input[type=button]').innerHTML = &quot;Rechercher&quot;;</code> but I know something is missing because I don't want to select all buttons on page.</p>
  <p>I also find a sort of &quot;hack&quot; in CSS (a language that I'm more comfortable with), but I'm not a huge fan of this kind of solution because CSS isn't made to edit text. For my case, I've imagined this:</p>
  <pre><code>.notion-topbar &gt; div:nth-child(1n+3) &gt; .button {
    visibility: hidden
  }
  
  .notion-topbar &gt; div:nth-child(1n+3) &gt; .button:after {
    visibility: visible;
    display: block;
    content: 'Rechercher';
    position: absolute;
  }
  </code></pre>
  <p><strong>HELP</strong></p>
  <p>I could really use your help because I'm hard struggling on this one.
  Thanks for your time!</p>