javascript - 如何使用 JavaScript 写入 <div> 元素？

我已经使用 Google 和 Stack Overflow 进行了搜索，但似乎没有找到答案。我想使用 JavaScript 在

元素内写入文本，然后清除

元素，并在其中写入更多文本。我正在制作一个简单的文字冒险游戏。

这就是我正在尝试做的事情:

<DOCTYPE!HTML>
    <body>
        <div class="gamebox">
            <!-- I want to write in this div element -->

        </div>
    </body>

作为 JavaScript 的新用户，我如何在 div 元素游戏盒内编写内容？不幸的是，我的 JavaScript 技能不是很好，如果您能耐心解释代码中发生的情况，那就太好了。

最佳答案

您可以使用 querySelector 获取对与任何 CSS 选择器匹配的第一个元素的引用。在您的情况下，类选择器:

var div = document.querySelector(".gamebox");

querySelector 适用于所有现代浏览器，包括 IE8。如果没有找到任何匹配的元素，它将返回null。您还可以使用 querySelectorAll 获取所有匹配元素的列表:

var list = document.querySelectorAll(".gamebox");

然后使用从 0 开始的索引(list[0]、list[1] 等)访问该列表中的元素；列表的长度可从 list.length 获得。

然后您可以将 HTML 字符串分配给 innerHTML:

div.innerHTML = "This is the text, <strong>markup</strong> works too.";

...或者您可以使用createElement或createTextNode和appendChild/insertBefore:

var child = document.createTextNode("I'm text for the div");
div.appendChild(span); // Put the text node in the div

这些函数可以在 the DOM 中找到。其中很多现在都包含在 HTML5 specification 中。以及(特别是 Section 3 )。

关于javascript - 如何使用 JavaScript 写入 <div> 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22112522/

相关文章：

javascript - 最初如何调用api来保存帖子