title: How to change text in html element under an element using JS
body: <p><strong>Full Code at Last/end</strong></p>
  
  <p>I have been working on a project,
  So for landing page I wanna make a hero i.e. fade in and out slideshow using JavaScript.</p>
  
  <p>BRIEF:</p>
  
  <p>What I want:- 
  I have set a variable to get a random number between 1 and 3, so after depending upon the random number, the image of hero, the quote inside the hero and author name would change using Js!</p>
  
  <p>Problem:-</p>
  
  <pre><code>        &lt;div class="hero-1" &gt;
              &lt;img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg"  &gt;
                  &lt;h2 id="quote_h2" &gt;
                      &lt;span class="quotation" &gt;&amp;#8220;&lt;/span&gt; 
                          Don't worry about people stealing your design work.
                          Worry about the day they stop.
                      &lt;span class="quotation" &gt;&amp;#8221;&lt;/span&gt;
                  &lt;/h2&gt;
              &lt;span class="author" &gt;
                  &lt;h4 id="author_h4" &gt;–Sohel Shekh&lt;/h4&gt;
              &lt;/span&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I want to change the text of quote depending upon the random number (i.e. 1-3)</p>
  
  <p>But as the span element is there, which is for "
  So if I </p>
  
  <pre><code>quote_txt.innerHTML = "New Quote";
  </code></pre>
  
  <p>It removes / cancels the <code>&lt;span&gt;</code> element which contains the <strong>"</strong> quotation marks!</p>
  
  <p>What should I do now so that it only changes the actual text not the <code>&lt;span&gt;</code> present inside the <code>&lt;h3&gt;</code>??????</p>
  
  <p>Please answer if anybody finds solution:</p>
  
  <p>Full HTML Code:</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>var slideshow_timing = 4000;
  var quote_txt = document.getElementById("quote_h2");
  var author_name = document.getElementById("author_h4");
  var starting_Status = Math.floor((Math.random() * 3) + 1);
  var slideshow_Background = document.getElementById("slideshow_background");
  
  if (starting_Status == 1) {
    slideshow_Background.src = "images/hero-1.jpg";
  } else {
    alert("t")
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" /&gt;
    &lt;title&gt;Sohel Editz : Home&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/index.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&amp;display=swap"&gt;
    &lt;link rel="stylesheet" href="css/slick-theme.css"&gt;
  
    &lt;style type="text/css"&gt;
      * {
        margin: 0px;
        padding: 0px;
        background-color: #fff;
        font-family: 'Montserrat', sans-serif;
        ;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Main div element for all the page elements --&gt;
    &lt;div class="main_Top"&gt;
      &lt;div class="nav" id="nav"&gt;
        &lt;img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()"&gt;
        &lt;!-- &lt;img class="nav-img" alt="logo" src="images/logo.png" id="logo" &gt; --&gt;
        &lt;h2 class="nav-cont nav-logo"&gt;Sohel Editz&lt;/h2&gt;
        &lt;img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()"&gt;
      &lt;/div&gt;
      &lt;div class="navbar" id="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="applyLogo.html"&gt;Apply for logo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="login.html"&gt;Login&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="aboutus.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="account-bar" id="account-bar"&gt;
        &lt;img id="profile_img" src="images/defaultProfileImg.svg"&gt;
        &lt;i class="fa fa-edit" id="edit_pencil"&gt;&lt;/i&gt;
        &lt;div id="details" class="details"&gt;
          &lt;h2 id="user_name"&gt;Example Name&lt;/h2&gt;
          &lt;h5 id="useremail"&gt;someone@example.com&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Span element for reserving space--&gt;
      &lt;div class="headerSpace"&gt;
      &lt;/div&gt;
      &lt;div class="hero"&gt;
        &lt;!-- Hero 1 --&gt;
        &lt;div class="hero-1"&gt;
          &lt;img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg"&gt;
          &lt;h2 id="quote_h2"&gt;
            &lt;span class="quotation"&gt;&amp;#8220;&lt;/span&gt; Don't worry about people stealing your design work. Worry about the day they stop.
            &lt;span class="quotation"&gt;&amp;#8221;&lt;/span&gt;
          &lt;/h2&gt;
          &lt;span class="author"&gt;
       &lt;h4 id="author_h4" &gt;–Sohel Shekh&lt;/h4&gt;
      &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript"&gt;
    &lt;/script&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/index.js"&gt;&lt;/script&gt;
  &lt;script src="js/slick.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>