Question

所以我对编程很有经验，但我刚刚开始使用Javascript。当我点击一个div时，我正在创建一个新元素，但它不起作用。我尝试过很多方法，这个方法看起来最简单。你能帮我弄清楚出了什么问题吗？

<!doctype html>
<html>
    <head>
        <link type="text/css" rel='stylesheet' href='style.css'/>
        <meta charset="UTF-8">

    </head>
    <body>
        <div class="head">
            <h1>Corkboard</h1>
            <div id="addNote" onclick="showNewNoteMenu()">+</div>
        </div>

        <div id = "newNoteMenu">
            <div class="container">
                <input id="title" type="text" placeholder="Title" name="Title"/> <br />
                <textarea id="details" cols=22.5 rows=5></textarea> <br />
                <div onclick="createNewNote()" id='submitNewNote'>Make New Note</div>
            </div>
        </div>

        <div class="content" onclick="hideNewNoteMenu()">

        </div>
    </body>

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="script.js"></script>
</html>

    function showNewNoteMenu() {
        document.getElementById("newNoteMenu").style.display = "inline-block";
    };

    function hideNewNoteMenu() {
        document.getElementById("newNoteMenu").style.display = "none";
    };

    function createNewNote() {
        document.getElementsByTagName("h1").innerHTML = "This works"
        alert("OK");
        var title = document.getElementById("title").value;
        var text = document.getElementById("details").value;
        var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
        var time = hours + ":" + minutes;
        var content = document.getElementsByClassName("content");

        var note = '<div class="note"><div class="container"><h2>'+ title + '</h2><i>' + time + '</i><p>' + text + '</p></div></div>';


    }

    hideNewNoteMenu();

Answer 1

似乎缺少的是将标记字符串note插入document。

在这种情况下，您可以使用.insertAdjacentHTML()：

var content = document.getElementsByClassName("content");
var note = /* ... */;

content[0].insertAdjacentHTML('beforeend', note);

使用beforeend，它会将note作为content的最后一个孩子插入。

此外，使用[0]是因为getElementsByClassName()会返回元素集合（请注意复数getElements...）。

由于您已经包含了jQuery，因此也可以使用jQuery(html)和.appendTo()完成此操作：

$(note).appendTo(content[0]);

Answer 2

改变这个：

<div id="addNote" onclick="showNewNoteMenu()">+</div>

到

<div id="addNote">+</div>

和

document.getElementById("addNode").addEventListener("click",showNewNoteMenu);

确保在加载和解析页面后执行JavaScript。你应该有一个window.onload。

单击另一个div后，为什么不会显示此div？

2 个答案: