如何使用jquery追加图像和标题

Question

我有这个来自ajax请求的数据，我想让它们出现在同一行;这是我的代码

HTML

<div id="one"></div>

jquery的

$getJSON(...,function(data){

$("#one").append("<img src="+ data.image_icon +">"+"<h3>" +data.title"</h3>")

})

当我这样做时，这些物品不会出现在同一条线上。我该怎么做才能使两者出现在同一条线上？

Answer 1

尝试添加

   img {
     display: inline-block;
   }

在你的CSS中

Answer 2

h3是一个被屏蔽的元素。

您必须覆盖display属性。

试试这个：

h3 { display: inline-block; }
img { display: inline-block; }

Answer 3

使用display: inline-block;作为元素h3，并将单引号（'）放在正确的位置，如下所示

＆＃13;

＆＃13;

var image_icon = 'http://placehold.it/140x158';
var title = 'title';
$("#one").append("<img src='" + image_icon + "'>" + "<h3>" + title + "</h3>");

＆＃13;

h3 {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>

＆＃13;

＆＃13;

＆＃13;