如何使用新的li onload（jquery）在ul中附加图像？

Question

如何使用新的li（jquery）将图像附加到ul中？

将图像移动到ul上的新li和新的addclass

<img src="img" class="navimg">
<ul class="nav">
  <li>nav 1</li>
  <li>nav 1</li>
</ul>

 
<ul class="nav newclass">
  <li>nav 1</li>
  <li>nav 1</li>
   <li><img src="img" class="navimg"></li>
</ul>

这是另一个问题。

<div class="nav1">
<ul>
  <li>nav 1</li>
  <li>nav 1</li> 
</ul>
</div>

<a href="" class="nav"><img src="img"  /></a>

<div class="nav2">
<ul>
  <li>nav 1</li>
  <li>nav 1</li> 
</ul>
</div>


<a href="" class="nav2"><img src="img"  /></a>

是否可以匹配相同名称的css，并使用新的li <a href="" class="nav2"><img src="img" /></a>

在同一个类中移动<div class="nav2"> <ul> <li>nav 1</li> <li>nav 1</li> </ul>

Answer 1

请尝试以下代码。

$(document).ready(function(){
  addImage();
});
function addImage(){
  var html = "<li><img src='img' class='imgforli' /></li>";
  $('.nav').addClass('imageclass').append(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><img src="img" class="imgforli" /></a>

need to move above image inside ul with new li

<ul class="nav">
  <li>nav 1</li>
  <li>nav 1</li>
   <li><img src="img" class="imgforli"/></li>
</ul>

Answer 2

试试这个：

$(document).ready(function () {        
    var imgTag = $(".imgforli").clone(true);
    var newHtml = "<li>" + imgTag[0].outerHTML + "</li>";       
    $(".imgforli").remove();
    $("ul").append(newHtml).addClass("newclass");
});

Answer 3

当document为ready ...

时

选择ul课程nav和append ...

一个新的<li></li>元素，它将append编辑...

所有img个元素navimg和...

最后将newclass类添加到ul。

现在，在代码中：

$(document).ready(function(){
        $('ul[class="nav"]').append(
                $("<li></li>").append(
                        $('img[class="navimg"]')
                )
        ).addClass('newclass');
});