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

【问题标题】：how to append image and header using jquery如何使用jquery附加图像和标题
【发布时间】：2017-11-12 14:10:38
【问题描述】：

我有这个从 ajax 请求获得的数据，我想让它们出现在同一行；这是我的代码

html

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

jquery

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

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

})

当我这样做时，项目不会出现在同一行。我该怎么做才能使两者出现在同一行？

【问题讨论】：

【解决方案1】：

尝试添加

   img {
     display: inline-block;
   }

在你的 CSS 中

【讨论】：

【解决方案2】：

h3 是一个被阻塞的元素。

您必须覆盖display 属性。

试试这个：

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

【讨论】：

【解决方案3】：

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

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

h3 {
  display: inline-block;
}

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

【讨论】：