.innerHTML 只替换部分

Question

我有一些 JavaScript 可以显示视频和倒计时计时器，倒计时完成后它会切换到 div 的内容来回答问题。这是我的代码：

<script type="text/javascript">
            var imagediv = document.getElementById("questionarea");
            var counter = 15;
            var newElement = document.createElement("div");
            newElement.innerHTML = "15 Seconds remaining "+<?php echo json_encode($mediahtml); ?>;
            var id;

            imagediv.parentNode.replaceChild(newElement, imagediv);

            id = setInterval(function() {
                counter--;
                if(counter < 0) {
                    newElement.parentNode.replaceChild(imagediv, newElement);
                    clearInterval(id);
                } else {
                    newElement.innerHTML = counter.toString() + " seconds remaining."+ <?php echo json_encode($mediahtml); ?>;
                }
            }, 1000);
        </script>

并且 php 变量 mediahtml 是：

$mediahtml = $mediahtml."<video width='320' height='240' controls>"."<source src=".$video." type=video/".$filextention.">Your browser does not support the video tag.</video>";

我的问题是目前 javascript 重新加载整个 div 这意味着视频无法播放，我想做的只是替换文本（实际上只是 counter.toString()) 但我不确定该怎么做？

谢谢

Answer 1

将数字包裹在一个span中，然后修改that:

var imagediv = document.getElementById("questionarea");
var counter = 15;
var newElement = document.createElement("div");
newElement.innerHTML = "<span>15</span> " +
  '<video controls width="160" height="120" autoplay=autoplay muted=muted>' +
   '<source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" type=\'video/mp4; codecs="avc1, mp4a"\'>' +
   '<source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident.ogv" type=\'video/ogg; codecs="theora, vorbis"\'>' +
  '</video>';
var id;

imagediv.parentNode.replaceChild(newElement, imagediv);
var countSpan = newElement.firstChild;

id = setInterval(function() {
  counter--;
  if (counter < 0) {
    newElement.parentNode.replaceChild(imagediv, newElement);
    clearInterval(id);
  } else {
    countSpan.innerHTML = counter.toString();
  }
}, 1000);

<div id="questionarea">question</div>

请注意，要使其与此代码精确配合，<span> 需要位于 HTML 字符串的最开头。没有前导空格。

Answer 2

您需要将倒计时包装在另一个元素中，可能是 <span>，然后更新它的 html：

<script type="text/javascript">
        var imagediv = document.getElementById("questionarea");
        var counter = 15;
        var newElement = document.createElement("div");

        // create the countdown element and set its initial html
        var countdown = document.createElement("span");
        countdown.innerHTML = "15 Seconds remaining";

        // just add the video to newElement
        newElement.innerHTML = <?php echo json_encode($mediahtml); ?>; // may need ""s around the php

        // now insert the countdown at the start, before the video
        newElement.insertBefore(countdown, newElement.childNodes(0));
        var id;

        imagediv.parentNode.replaceChild(newElement, imagediv);

        id = setInterval(function() {
            counter--;
            if(counter < 0) {
                newElement.parentNode.replaceChild(imagediv, newElement);
                clearInterval(id);
            } else {
                // set just countdown HTML instead
                countdown.innerHTML = counter.toString() + " seconds remaining.";
            }
        }, 1000);
    </script>

.innerHTML 只替换部分

.innerHTML only replace part

html

javascript

php