如何在div内动态添加HTML元素到前一元素右侧而非换行到下方

修复方案 #

核心原因

• 代码中主动插入了<br>换行标签，强制后续内容下移
• JS代码存在字符串拼接语法错误，事件对象参数引用不一致
• 可选：外层容器添加弹性布局/不换行规则，避免元素宽度超出后自动折行

修改后的完整代码

CSS 部分（放在<head>的<style>标签内）

#items {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 如果不需要强制不换行，删掉下面这行即可 */
  white-space: nowrap;
}

修正后的JS代码

$(document).ready(function(){
  $("#comp").click(function (e){
    e.preventDefault();
    // 移除<br>标签，修正字符串拼接格式
    $('#items').append('<label>My Label</label>'+
            '<input>'+
            '<label>Second Label</label>');
  });
});

修正后的HTML代码（移除属性间多余逗号）

<div id="items">
</div>
<input type="button" name="comp" value="Compare" id="comp">

修改后每次点击按钮新增的元素都会自动排列在已有元素的右侧，不会换行。

内容的提问来源于stack exchange，提问作者MC2020