jQuery在DOM中插入一个元素不起作用

Question

HTML结构是这样的：

<li class="hide-sub-menu">
    <ul>
        <li value="screen-15" class="submenu"><span>常规设置</span></li>
        <li value="screen-16" class="submenu"><span>数字证书</span></li>
    </ul>
</li>

js是这样写的：

$(".submenu").click(function(){
    $(this)[0].append('<span class="icon-arrow"></span>');
})

已经在CSS文件中写好了.icon-arrow的样式，<span class="icon-arrow></span>是个»符号，目的是点击当前的菜单动态添加一个»，以表示当前菜单被选中，上面写的结构是子菜单，主菜单通过这种方法是可行的，

但是到这里就不行了，插入效果是这样的：

试了一下这样写还是不行：

var icon_arrow = document.createElement("span");
icon_arrow.setAttribute("class","icon-arrow")
$(this)[0].appendChild(icon_arrow);

Answer 1

$(this)[0]多此一举,为何转换2次;
$(this)[0] === this;不明白你到底是想用jq的方法还是原生的方法;
如果想用原生的方法:this.appendChild('<span class="icon-arrow"></span>');
如果jq的方法:$(this).append('<span class="icon-arrow"></span>');||$('<span class="icon-arrow"></span>').appendTo($(this))

Answer 2

你$(this)[0]返回的是原生dom对象啊，后边还跟jQ方法？

Answer 3

$(this)将原生转换为jq的dom
$(this)[0]将jq的dom转换为原生
$(this)[0]===this

Answer 4

原生对象和jq对象的区别

Answer 5

$(".submenu").click(function(){
    $(this).append('<span class="icon-arrow"></span>');
})

Answer 6

你换成这样写，根据自己的修改

$(".submenu").each(function(){
    $(this).click(function(){
        $(".submenu").html("");//看你这里要不要清空submenu下的内容
        $(this).append('<span class="icon-arrow"></span>');
    })
})

Answer 7

用each循环，在用$(this),直接后面添加你需要填的标签和样式