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>

Suren Srapyan · Accepted Answer · 2017-12-11 07:54:52Z

3

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>

answered Dec 11, 2017 at 7:54

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranay Rana · Accepted Answer · 2017-12-11 07:57:14Z

2

you need to use append() method of jquery library it will add span after text.

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

answered Dec 11, 2017 at 7:54

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

kyun · Accepted Answer · 2017-12-11 07:54:55Z

1

If you want to use Vanilla JS, Try this.

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

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

answered Dec 11, 2017 at 7:54

kyun

10.4k9 gold badges36 silver badges79 bronze badges

innerHTML is not purposed to populate existing elements. Use appendChild or insertAdjacentHTML instead.