[英]Add <i> tag inside of an anchor tag just before the <span> tag using jQuery
I have this html code:我有这个 html 代码:
<div id="outerDiv" class="cls">
<ul id="ul">
<li id="li">
<a id="link1" href="#">
<span>Click me</span>
</a>
</li>
</ul>
</div>
How do I in jQuery add an <i>
tag just before the <span>
element so the HTML is rendered as:我如何在 jQuery 中在<span>
元素之前添加一个<i>
标签,以便 HTML 呈现为:
<div id="outerDiv" class="cls">
<ul id="ul">
<li id="li">
<a id="link1" href="#">
<i class="zmdi zmdi-check"></i>
<span>Click me</span>
</a>
</li>
</ul>
</div>
You can use jQuery's .before()
:您可以使用 jQuery 的.before()
:
Insert content, specified by the parameter, before each element in the set of matched elements.在匹配元素集中的每个元素之前插入由参数指定的内容。
Demo:演示:
$(document).ready(function(){ $('#link1 span').before('<i class="zmdi zmdi-check">Some Text</i>'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outerDiv" class="cls"> <ul id="ul"> <li id="li"> <a id="link1" href="#"> <span>Click me</span> </a> </li> </ul> </div>
.before script code add bottom of your code like below code. .before 脚本代码添加代码底部,如下面的代码。 it will work它会工作
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerDiv" class="cls">
<ul id="ul">
<li id="li">
<a id="link1" href="#">
<span>Click me</span>
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$('#link1 span').before('<i class="zmdi zmdi-check">Some Text</i>');
</script>
Please add jquery-请添加 jquery-
<script type="text/javascript">
$( "<i></i>" ).insertBefore( "#link1 span" );
$('#link1 i').addClass('zmdi zmdi-check');
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.