使用功能更改文本并包含项目符号图像

Change text with function and include bullet images

本文关键字：包含 项目 符号 图像 文本 功能      更新时间：2023-09-26

我试图找出一些没有结果的东西。我有一个用作按钮的简单<img>，如果我单击它，来自其他<h3>元素的文本应该会更改。该部分正在工作，但我也试图在新文本中包含图像作为 Bullet 元素，但它不起作用，它也呈现为文本。这是我的实际代码：

.HTML：

 <img id="button1" src="images/info.png"/>
 <h3 class="text1"> Here's some temporal text </h3>

JAVASCRIPT： 

 $( "#button1").click(function() {
 $(".text1").text('This will be the new text also including a bullet <img src="images/bullet.png" style="margin-right:10px;"/> And here continues the text, but seems to be that the bullet is not being rendered:( only as text');
 });

你能帮我找到解决方案吗？

使用 .html() 而不是 .text()，因为.text()只会设置元素的textContent，它不会插入提供的参数作为DOM Element 

 $("#button1").click(function() {
   $(".text1").html('This will be the new text also including a bullet <img src="images/bullet.png" style="margin-right:10px;"/> And here continues the text, but seems to be that the bullet is not being rendered:( only as text');
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="button1" src="images/info.png" />
<h3 class="text1"> Here's some temporal text </h3>

相关文章：