如何使用jQuery或javascript在div中的innerhtml文本之后添加span？

Question

我的文档结构如下：

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

如何在文本后插入 span 标记，以便最终文档结构如下所示：

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

Answer 1

你需要使用jquery库的append()方法，它会在文本之后添加span。

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

Answer 2

只需使用jQuery#append即可。我还会打印html的{​​{1}}结构，看看它是什么样的。

div

const div = $('.text');

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

console.log(div.html());

Answer 3

如果您想使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> Send email </div>，请尝试此操作。

Vanilla JS

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