Javascript 使用prependTo（）时缺少按钮之间的间距

我正在为户外电力设备经销商创建一个display builder应用程序，经销商可以在其中添加、删除和重新排列不同的显示部分。

显示部分列表位于名为

sectionControls

的div中。此div包含一个左右列（名为

leftCol

和

righcol

），其中显示部分的名称位于左侧，按钮位于右侧：

但是，如果经销商选择墙高为90”，则默认的96“背包鼓风机部分将替换为90”背包鼓风机部分。这是通过隐藏原始背包鼓风机部分并将新部分前置到列表顶部来实现的：

如上图所示，与下面的其他按钮相比，按钮未对齐。此外，加号和减号按钮之间应该有一个空间。如何调整此位置？

这是我用来隐藏96“背包风机部分并在90”部分的前面加上前缀的代码：

if(wallHeight === "90"){ //If dealer has a 90 height, we need to show the 90" backpack blower display and hide the normal 96" backpack blower display
      $('<p>Backpack Blower <strong>(90" tall display)</strong></p>').prependTo("#sectionControls .leftCol");
      $("<input type='button' class = 'section-button section-remove-button' value='-'' id = 'remove90BackpackBlowerSectionBtn' onclick='remove90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $("<input type='button' class = 'section-button' value='+'' id = 'add90BackpackBlowerSectionBtn' onclick='add90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $('<input type="button" class = "section-info-button" value="i" id = "90BackpackBlowerSectionInfoBtn" onclick ="show90BackpackBlowerSectionInfo()">').prependTo("#sectionControls .rightCol");

      //Hide 96" backpack blower section
      $("#96BackpackBlowerText").hide();
      $("#backpackBlowerSectionInfoBtn").hide();
      $("#addBackpackBlowerSectionBtn").hide();
      $("#remove90BackpackBlowerSectionBtn").hide();    
}

这是原始的HTML

 <div id = "sectionControls">
  <h1>Display Sections</h1>
  <div class = "leftCol">
  <p id ="96BackpackBlowerText">Backpack Blower</p>
  <p>Handheld and Backpack Blowers</p>
  <p>Chainsaw</p>
  <p>Hedge Trimmer</p>
  <p>Trimmer</p>
  <p>Accessories</p>
  <p>PAS</p>
  <p>Cordless</p>
</div>

<div class = "rightCol">
  <input type="button" class = "section-info-button" value="i" id = "backpackBlowerSectionInfoBtn" onclick ="showBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addBackpackBlowerSectionBtn" onclick="addBackpackBlowerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeBackpackBlowerSectionBtn" onclick="removeBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()">
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "chainsawSectionInfoBtn" onclick ="showChainsawSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addChainsawSectionBtn" onclick="addChainsawSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeChainsawSectionBtn" onclick="removeChainsawSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "hedgeTrimmerSectionInfoBtn" onclick ="showHedgeTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHedgeTrimmerSectionBtn" onclick="addHedgeTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHedgeTrimmerSectionBtn" onclick="removeHedgeTrimmerSection()"> 


  <br>

  <input type="button" class = "section-info-button" value="i" id = "trimmerSectionInfoBtn" onclick ="showTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addTrimmerSectionBtn" onclick="addTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeTrimmerSectionBtn" onclick="removeTrimmerSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "accessoriesSectionInfoBtn" onclick ="showAccessoriesSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addAccessoriesSectionBtn" onclick="addAccessoriesSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeAccessoriesSectionBtn" onclick="removeAccessoriesSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "pasSectionInfoBtn" onclick ="showPasSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addPasSectionBtn" onclick="addPasSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removePasSectionBtn" onclick="removePasSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "cordlessSectionInfoBtn" onclick ="showCordlessSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addCordlessSectionBtn" onclick="addCordlessSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeCordlessSectionBtn" onclick="removeCordlessSection()"> 
</div>
</div>

显示区
背包吹风机

手持式和背包式鼓风机

电锯

树篱修剪机

修剪机

配件

PAS

无绳

事实证明，HTML中的间距在这里实际上很重要（我知道通常情况下并不重要）

请注意，当我删除第二行

input

标记之间的空格时，它们之间的空格消失了

没有很好的解决方案，因为浏览器实际上使用的是空白。一个选项是使用如下span以编程方式插入空白：

    $("<span> </span>").prependTo("#sectionControls .rightCol");

之后：

---

事实证明，HTML中的间距在这里实际上很重要（我知道通常情况下并不重要）

请注意，当我删除第二行

input

标记之间的空格时，它们之间的空格消失了

没有很好的解决方案，因为浏览器实际上使用的是空白。一个选项是使用如下span以编程方式插入空白：

    $("<span> </span>").prependTo("#sectionControls .rightCol");

之后：

我猜您在手工编码时添加了空格，而生成的代码没有；）（与内联块不同）您能提供您开始使用的实际HTML吗？@cjc我刚刚添加it@G-Cyr为什么生成的代码不会创建空白？生成的代码是否会在添加下一位之前点击空格键或返回到下一行？问题似乎与之相反（数千个类似问题中的一个问题）b尝试在开始括号之前或结束括号之后添加空格，并告诉我们它的作用；）我猜您在手动编码时添加空格，而生成的代码不添加空格；）（与内联块不同）您能提供您开始使用的实际HTML吗？@cjc我刚刚添加it@G-Cyr为什么生成的代码不会创建空白？生成的代码是否会在添加下一位之前点击空格键或返回到下一行？问题似乎与之相反（数千个类似问题中的一个问题）b尝试在开始括号之前或结束括号之后添加一个空格，并告诉我们它的作用；）我很难看到你在哪里删除了空格。你能澄清一下吗？我在第二行的

input

标记之间删除了它。我将更新答案以使其更清楚。我很难看到你在哪里删除了空格e、 你能澄清一下吗？我在第二行的

input

标记之间删除了它。我会更新答案以使其更清楚。