时间戳

首页 > 解决方案 > 如何使用JS更改元素下的html元素中的文本

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

问题描述

最后/结束的完整代码

我一直在做一个项目，所以对于登陆页面，我想制作一个英雄，即使用 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>包含"引号的元素！

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

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

完整的 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>

标签： javascripthtmlelementslideshow

解决方案

是的，你使用的问题.innerHTML是它会清除元素。里面的内容无关紧要，它会被您设置的内容覆盖。

在您的情况下，您有几个选择：

  • 将文本移动到容器中，以便您可以选择并更新它
  • 获取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>

推荐阅读