Question

我创建了javascript程序，因为我已经在body和prompt中创建了div标签，以便在我创建了div之后接受来自用户的文本，并且想要向div添加提示文本。新div应该在创建之前显示一个，为此我使用了insertBefore（）。我试图在控制台中获取值，我在控制台中获取值。但我的计划并没有按照预期运作。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>trail</title>
    <meta charset="utf-8">
    <style type="text/css">

    .pink{
        background-color: pink;     
    }

    .green{
        background-color: #71e887;
    }

    </style>

    <script type="text/javascript">
    var movieText =  prompt("What movie do you like?"); 

    var newDiv = document.createElement("div");
    parent = newDiv.parentNode;
    newDiv.className = "green";

    var text = document.createTextNode(movieText + " is a good movie");

    newDiv.innerHTML  = text;
    newDiv.appendChild(text);   

    var beforeMe = document.getElementById("div1");     
    document.body.insertBefore(newDiv, beforeMe);

    </script>

</head>
<body>


<br>

<div class="pink" id = "div1"> 
    I love watching movies <br/>
    This is one of my favorite movie:
</div>  

</body>
</html>

我的输出：

[！[在此处输入图像说明] [1]] [1]

预期产出：

[！[在此处输入图像说明] [2]] [2]

Answer 1

如 @pari 所述，您正在使用innerHTML插入文本节点对象。此函数将对文本节点执行.toString()。这是您收到输出[object text]的方式。如果您需要使用innerHTML，那么请使用.innerHTML(movieText + " is a good movie") 或者您可以像这样使用文本节点：

var textNode = document.createTextNode(movieText + " is a good movie");
newDiv.appendChild(textNode);

但不要同时使用两者。

javascript：正确使用insertBefore（）

1 个答案: