Question

我有一些HTML，例如：

<div id="parent">
    <div id="foo1">foo1</div>
    <div id="foo2">foo2</div>
    <div id="foo3">foo3</div>
</div>

有没有一种方法使用jQuery在Bar和#foo2之间直接插入纯文本#foo3，因此生成的HTML将如下所示：

<div id="parent">
    <div id="foo1">foo1</div>
    <div id="foo2">foo2</div>
    Bar
    <div id="foo3">foo3</div>
</div>

我可以使用<span>将带有$("<span/>").text("Bar").insertAfter("#foo2")标记的文本放入其中，但是是否有一种方法可以将纯文本放置在其中而没有<span>？

Answer 1

您可以使用.after：

$('#foo2').after('bar');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
    <div id="foo1">foo1</div>
    <div id="foo2">foo2</div>
    <div id="foo3">foo3</div>
</div>

Answer 2

使用document.createTextNode("bar")：

$("#foo2").after(document.createTextNode("bar"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
    <div id="foo1">foo1</div>
    <div id="foo2">foo2</div>
    <div id="foo3">foo3</div>
</div>

Answer 3

如果您需要使用普通JavaScript的替代方法，则可以使用insertAdjacentText()

document.getElementById('foo2').insertAdjacentText('afterend', 'bar');

<div id="parent">
  <div id="foo1">foo1</div>
  <div id="foo2">foo2</div>
  <div id="foo3">foo3</div>
</div>

如果您有兴趣，第一个参数提供其他选择：

element.insertAdjacentText（ position ， element ）;

位置

一个DOMString，代表相对于元素的位置；必须是以下字符串之一：


'beforebegin'：在元素本身之前。

'afterbegin'：在元素内，在其第一个子元素之前。

'beforeend'：就在元素内，位于其最后一个子元素之后。

'afterend'：在元素本身之后。


元素

DOMString代表要插入树中的文本。

在两个div之间插入纯文本

3 个答案: