Question

我使用Google和Stack Overflow搜索过，但我似乎没有找到答案。我想在＆lt; div＆gt;中写文本元素，使用JavaScript，然后清除＆lt; div＆gt;元素，并在其中写入更多文本。我正在制作一个简单的文字冒险游戏。

这就是我想要做的事情：

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

        </div>
    </body>

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

Answer 1

您可以使用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）。

Answer 2

就像提到的getElementsByClassName更快。重要的是要知道它，当你使用它时，你会得到一个数组，其中包含元素，以达到你想要指定其索引行的元素[0]，[1]

var gameBox = document.getElementsByClassName('gamebox')[0];

这是你怎么做的

    //returns array with elements
    var gameBox = document.getElementsByClassName('gamebox');

//inner HTML (overwrites fsd) this can be used if you direcly want to write in the div
    gameBox[0].innerHTML ='<p>the new test</p>';



//Appending when you want to add extra content

    //create new element <p>
    var newP = document.createElement('p');


    //create a new TextNode
    var newText = document.createTextNode("i'm a new text");

    //append textNode to the new element
    newP.appendChild(newText);


    //append to the DOM
    gameBox[0].appendChild(newP);

https://developer.mozilla.org/en-US/docs/Web/API/document.createElement https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

Answer 3

选择包含document.querySelector的单个元素或包含document.querySelectorAll的集合。

然后这取决于你想做什么：

将Text写入div或create元素，append将其写入div。

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

3 个答案: