Question

我知道通过css规则管理间距会更好，但是如何使用jQuery在word之间插入空格？请考虑以下脚本（JSfiddle上的see it），该脚本无法正常工作（未插入空格）：

HTML：

<div id='div1'>
<span>hello</span>
</div>

JS：

$("<span>my</span> &nbsp;").insertAfter($("#div1").children("span").eq(0));
$("<span>friends</span> &nbsp;").insertAfter($("#div1").children("span").eq(1));
alert($("#div1").html());

Answer 1

使用append：

会更容易

$("#div1").append(
    '&nbsp;',
    $('<span>').text('my'),
    '&nbsp;',
    $('<span>').text('friends'),
    '&nbsp;'
);

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

Answer 2

一种方法是使用.before()插入空格：

$("<span>my</span>").insertAfter($("#div1").children("span").eq(0)).before("&nbsp;")
$("<span>friends</span>").insertAfter($("#div1").children("span").eq(1)).before("&nbsp;")

JSFiddle演示：https://jsfiddle.net/c798vsn3/2/

Answer 3

这一行：

$("<span>my</span> &nbsp;")

创建一个没有结束空间的span元素，就像您在下面的代码片段中看到的那样。

您可以将所有链接减少到一行：

$("<span>&nbsp;my&nbsp;</span>")
  .insertAfter($("#div1 span:first")).append($("<span>friends&nbsp;</span>"));

＆＃13;

console.log('Test: -->' + $("<span>my</span> &nbsp;")[0].outerHTML + '<--')

$("<span>&nbsp;my&nbsp;</span>").insertAfter($("#div1 span:first")).append($("<span>friends&nbsp;</span>"));

＆＃13;

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

＆＃13;

Answer 4

你的问题不是JS，而是HTML，你在span元素之外添加空格，这没有任何效果。如果在span元素中添加空格（常规空间将起作用，实体名称不起作用），它将起作用。

除此之外，如果使用JQuery append（）方法，可以稍微清理一下代码。这也将使句子在一个span元素中。

<span id="text">hello</span>
<script>
  $("#text").append(" my");
  $("#text").append(" friends");
</script>

Answer 5

$("<span>&nbsp;my</span>").insertAfter($("#div1").children("span").eq(0));
$("<span>&nbsp;friends</span>").insertAfter($("#div1").children("span").eq(1));

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

我更新了your fiddle。

您必须移动 

jQuery：在html字符串的末尾插入空格

5 个答案: