Question

我正在学习JavaScript。我正在尝试使用replaceChild()方法在页面上切换文本。我想出了下面的代码。我不明白为什么它不起作用。请帮助。

<html>
<head>

<script>
    function toggleText() {
        var be= document.getElementById("main");
        var b4= be.getElementsByTagName("h1");
        var l8 = document.createElement("h1").innerHTML="After";
        var l88 = document.createElement("h1").innerHTML="Before";
        if (b4[0].innerHTML=="Before"){ 
            be.replaceChild(l8,b4[0]) 
        }
        if (b4[0].innerHTML=="After") {
            be.replaceChild(l88,b4[0]);
        }
    }
</script>

</head>
<body>
    <div id="main" onclick="toggleText()">
        <h1>Before</h1>
    </div>
</body>
</html>

Answer 1

除了评论中已经说过的内容之外：

var l8 = document.createElement("h1").innerHTML="After";
var l88 = document.createElement("h1").innerHTML="Before";

在此之后，您的变量不包含对已创建元素的引用，而是包含您分配给其innterHTML的字符串值。（赋值操作的结果是赋值。）然后尝试将文本值而不是元素引用传递给replaceChild必须失败。

分两步完成 - 先创建元素并将其引用保存到变量中 - 然后再操作它们的innerHTML。

var l8 = document.createElement("h1");
l8.innerHTML="After";
var l88 = document.createElement("h1");
var l88 = .innerHTML="Before";

（并且可能使用更合适的变量名称，因为如果你保持当前的“命名场景”，你迟早会感到困惑。）

Answer 2

为了更好的可读性，我建议如下：

<html>
<head>

<script>
    function toggleText() {
         var be= document.getElementById("main");
         var b4= be.getElementsByTagName("h1")[0];

         if (b4.innerHTML=="Before") { 
             b4.innerHTML = "After";
         }
         else if (b4.innerHTML=="After") {
             b4.innerHTML = "Before";
         }
    }
</script>

</head>
<body>
    <div id="main" onclick="toggleText()">
        <h1>Before</h1>
    </div>
</body>
</html>

Answer 3

正如CBrone所写，你必须先创建h1实例，将其存储到变量中，然后在变量上调用innerHML。

另一个问题是结构。首先，替换元素，然后测试另一个条件的相同元素，并执行另一个操作。在这种情况下，最好使用if ... else if ...语句而不是if ... if ...，这是问题的根源。

这是toggleText函数

function toggleText() {
    var be= document.getElementById("main");
    var b4= be.getElementsByTagName("h1");
    var l8 = document.createElement("h1");
    l8.innerHTML="After";
    var l88 = document.createElement("h1");
    l88.innerHTML="Before";
    if (b4[0].innerHTML == "Before")
    {
        be.replaceChild(l8, b4[0]);
    }
    else if (b4[0].innerHTML=="After")
    {
        be.replaceChild(l88, b4[0]);
    }
}

这是有效的fiddle

使用JavaScript切换文本

3 个答案: