如何使用jQuery更改锚定标签的文本?

时间:2018-11-20 13:35:11

标签: javascript jquery html

我想使用jquery在点击事件中更改锚标记的文本。

锚标签:

 <a id="view_email" href="#"><i class="fa fa-envelope"></i> View Email</a>

JQuery代码:

<script type="text/javascript">
$(document).ready(function(){
    $("#view_email").click(function(){
        $(this).text() = "abc@gmail.com";
    });
});
</script>

3 个答案:

答案 0 :(得分:1)

$(document).ready(function(){
    $("#view_email").click(function(){
        $(this).text("abc@gmail.com");//you will loose <i> tag
        //$(this).html("<i class="fa fa-envelope"></i> View Email")//better to use html instead of text.
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view_email" href="javascript:void(0);"><i class="fa fa-envelope"></i> View Email</a>

答案 1 :(得分:0)

.text()是一个方法,您不能分配给该方法调用;

尝试

<script type="text/javascript">
    $(document).ready(function(){
    $("#view_email").click(function(){
        $(this).textContent = "abc@gmail.com";
    });
    });
</script>

答案 2 :(得分:0)

因为text()函数也将信封图标替换为text,所以使用html()和图标来渲染文本,如下所示:

$(document).ready(function(){
    $("#view_email").click(function(){
        $(this).html("<i class='fa fa-envelope'></i>abc@gmail.com");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view_email" href="#"><i class="fa fa-envelope"></i> View Email</a>