如何使用JS更改元素下html元素中的文本

Question

完整代码位于 Last/end

我一直在做一个项目，因此，对于登录页面，我想制作一个英雄，即使用 JavaScript.

淡入淡出幻灯片

简介：

我想要什么：- 我设置了一个变量来获取1到3之间的随机数，所以根据随机数后，英雄形象，英雄中的引号和作者姓名将使用Js改变！

问题：-

        <div class="hero-1" >
            <img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg"  >
                <h2 id="quote_h2" >
                    <span class="quotation" >&#8220;</span> 
                        Don't worry about people stealing your design work.
                        Worry about the day they stop.
                    <span class="quotation" >&#8221;</span>
                </h2>
            <span class="author" >
                <h4 id="author_h4" >–Sohel Shekh</h4>
            </span>
        </div>

我想根据随机数（即 1-3）更改报价文本

但是由于存在 span 元素，它用于“ 所以如果我

quote_txt.innerHTML = "New Quote";

它删除/取消包含 " 引号的 <span> 元素！

我现在应该怎么做才能只更改实际文本而不是 <h3> 中存在的 <span>???????

如果有人找到解决方案，请回答：

完整 HTML 代码：

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" />
  <title>Sohel Editz : Home</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&display=swap">
  <link rel="stylesheet" href="css/slick-theme.css">

  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      background-color: #fff;
      font-family: 'Montserrat', sans-serif;
      ;
    }
  </style>

</head>

<body>
  <!-- Main div element for all the page elements -->
  <div class="main_Top">
    <div class="nav" id="nav">
      <img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()">
      <!-- <img class="nav-img" alt="logo" src="images/logo.png" id="logo" > -->
      <h2 class="nav-cont nav-logo">Sohel Editz</h2>
      <img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()">
    </div>
    <div class="navbar" id="navbar">
      <ul>
        <li><a href="applyLogo.html">Apply for logo</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="account-bar" id="account-bar">
      <img id="profile_img" src="images/defaultProfileImg.svg">
      <i class="fa fa-edit" id="edit_pencil"></i>
      <div id="details" class="details">
        <h2 id="user_name">Example Name</h2>
        <h5 id="useremail">someone@example.com</h5>
      </div>
    </div>
    <!-- Span element for reserving space-->
    <div class="headerSpace">
    </div>
    <div class="hero">
      <!-- Hero 1 -->
      <div class="hero-1">
        <img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg">
        <h2 id="quote_h2">
          <span class="quotation">&#8220;</span> Don't worry about people stealing your design work. Worry about the day they stop.
          <span class="quotation">&#8221;</span>
        </h2>
        <span class="author">
     <h4 id="author_h4" >–Sohel Shekh</h4>
    </span>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  </script>

  </div>
</body>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/slick.min.js"></script>


</html>

Answer 1

关键是将表示引用的相关 <span> 元素保存在变量中。

我认为以下内容对您有用：

const quotation = '<span class="quotation">&#8220;</span>';
const quote_txt = document.getElementById('quote_h2');

const quote = 'New Quote';
quote_txt.innerHTML = `${quotation}${quote}${quotation}`;
// or: quote_txt.innerHTML = quotation + quote + quotation;

<h2 id="quote_h2" >
    <span class="quotation" >&#8220;</span> 
        Don't worry about people stealing your design work.
        Worry about the day they stop.
    <span class="quotation" >&#8221;</span>
</h2>

希望对您有所帮助！

Answer 2

是的，使用 .innerHTML 时遇到的问题是它会清除元素。不管里面是什么，它都会被你设置的覆盖。

对于你的情况，你有几个选择：

将您的文本移动到一个容器中，这样您就可以 select 并更新它
获得 h2 元素后，找到您要更新的确切文本节点并使用 .replaceWith

示例replaceWith：

const h2Quote = document.getElementById('quote_h2');
// Find the Text Node you want to update, in this case, index 2
h2Quote.childNodes[2].replaceWith('Test');

<h2 id="quote_h2">
  <span class="quotation">&#8220;</span>
  Don't worry about people stealing your design work. Worry about the day they  stop.
  <span class="quotation">&#8221;</span>
</h2>

如何使用JS更改元素下html元素中的文本

How to change text in html element under an element using JS

html

javascript

element

slideshow