How add a span after innerhtml text inside a div using jQuery or javascript?

Question

I have a document structure looks like this:

<div class="text">
     Send email 
</div>

How can I insert a span tag after the text so that the final document structure looks like:

<div class="text">
     Send email <span class="envelope"></span>
</div>

Answer 1

您需要使用jquery库的append()方法，它将在文本后添加跨度。

$( "div.text" ).append( '<span class="envelope"></span>' );

Answer 2

Just use jQuery#append . I also print the html structure of the div to see what it is like.

 const div = $('.text'); div.append('<span class="envelope">Envelop</span>'); console.log(div.html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> Send email </div> 

Answer 3

If you want to use Vanilla JS , Try this.

  document.querySelector('.text').innerHTML += `<span class="envelope">sss</span>`; 

 <div class="text"> TEXT </div>