javascript - this.appendChild 不是一个函数

Question

我下面有 JS，一旦单击图像下方的图像，我会尝试显示菜单项，一旦单击某个项目，它就会消失。我有多个图像，这就是我构建这个动态内容菜单的原因。我计划在 userMenuContent 中添加一堆 html 元素

using var userMenuContent ="<div><form>...</<form></div>";

但首先我的小测试失败了

function userMenu() {
    var userMenudiv = document.createElement("div");
    userMenudiv.setAttribute("class", "statusContainer");
     var userMenuContent = "<p>test</p>";
    $(userMenudiv).append($(userMenuContent));
    $(userMenudiv).hide();
    this.appendChild(userMenudiv);
    $(userMenudiv).slideDown();
}

    <img  class="icon" src="image.png" onclick="userMenu()"/>

当我点击我得到的图像时 类型错误:this.appendChild 不是函数。我正在使用 jquery 1.8.3 和 jquery-ui1.8.24

Answer 1

“this”指的是窗口对象，而不是图像。

不要使用内联事件处理程序。为 DOM 元素指定一个 id 并以这种方式选择它。

您无法向图像添加 div。相反，您需要指定另一个目标元素

由于您使用的是 jQuery，因此只需按照 jQuery 的方式进行即可。

$(document).ready(function(){

    $('#userMenuImg').click(function(){

        $('#target')
            .append('<div class="statusContainer"><p>test</p></div>')
            .slideDown();

    });

});
<img id="userMenuImg" class="icon" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMKbTxKTOJbJvVTt2SZak49lARNnCU4D7ECfZn1KspIn6SXDHz3A">

<div id="target"></div>

​​