鍍金池/ 問(wèn)答/HTML/ jQuery在DOM中插入一個(gè)元素不起作用

jQuery在DOM中插入一個(gè)元素不起作用

HTML結(jié)構(gòu)是這樣的：

<li class="hide-sub-menu">
    <ul>
        <li value="screen-15" class="submenu"><span>常規(guī)設(shè)置</span></li>
        <li value="screen-16" class="submenu"><span>數(shù)字證書</span></li>
    </ul>
</li>

js是這樣寫的：

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

已經(jīng)在CSS文件中寫好了.icon-arrow的樣式，<span class="icon-arrow></span>是個(gè)?符號(hào)，目的是點(diǎn)擊當(dāng)前的菜單動(dòng)態(tài)添加一個(gè)?，以表示當(dāng)前菜單被選中，上面寫的結(jié)構(gòu)是子菜單，主菜單通過(guò)這種方法是可行的，

clipboard.png

但是到這里就不行了，插入效果是這樣的：

clipboard.png

試了一下這樣寫還是不行：

var icon_arrow = document.createElement("span");
icon_arrow.setAttribute("class","icon-arrow")
$(this)[0].appendChild(icon_arrow);
回答
編輯回答
影魅

$(this)[0]多此一舉,為何轉(zhuǎn)換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))

2018年7月5日 02:55
編輯回答
憶當(dāng)年

$(this)將原生轉(zhuǎn)換為jq的dom
$(this)[0]將jq的dom轉(zhuǎn)換為原生
$(this)[0]===this

2018年9月16日 19:31
編輯回答
雨蝶

你$(this)[0]返回的是原生dom對(duì)象啊，后邊還跟jQ方法？

2017年11月30日 05:38
編輯回答
嫑吢丕

你換成這樣寫，根據(jù)自己的修改

$(".submenu").each(function(){
    $(this).click(function(){
        $(".submenu").html("");//看你這里要不要清空submenu下的內(nèi)容
        $(this).append('<span class="icon-arrow"></span>');
    })
})
2018年5月7日 14:29
編輯回答
不二心

原生對(duì)象和jq對(duì)象的區(qū)別

2017年4月1日 01:33
編輯回答
墨小白

用each循環(huán)，在用$(this),直接后面添加你需要填的標(biāo)簽和樣式

2018年7月10日 06:37
編輯回答
憶當(dāng)年
$(".submenu").click(function(){
    $(this).append('<span class="icon-arrow"></span>');
})
2017年12月30日 10:58