jquery中的insertAdjacentHtml

Question

由于某些原因在FF中使用insertAdjacentHtml函数我得到insertAdjacentHTMl不是函数错误，在jQuery或其他一些替代javascript函数中是否有替代方法？

Answer 1

这取决于你如何使用它。

.insertAdjacentHTML("beforeBegin", ...) //$('...').before(...)
.insertAdjacentHTML("afterBegin", ...) //$('...').prepend(...)
.insertAdjacentHTML("beforeEnd", ...) //$('...').append(...)
.insertAdjacentHTML("afterEnd", ...) //$('...').after(...)

http://api.jquery.com/before/

http://api.jquery.com/after/

http://api.jquery.com/append/

http://api.jquery.com/prepend/

<小时/> 代码示例

$('<p class="border">PrependTo</p>').prependTo($('.main'));
    $('.main').prepend('<p class="border">Prepend</p>');

    $('<p class="border">AppendTo</p>').appendTo($('.main'));
$('.main').append('<p class="border">Append</p>');


$('<p class="border">Insert After</p>').insertAfter('.main');

$('<p class="border">Insert Before</p>').insertBefore('.main');

.border {
  border: 1px solid #000;
  margin: 10px;
  padding: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main border">
  <p>Main</p>
</div>

Answer 2

扩展并更正@Adam Terlson的answer：

以下是insertAdjacentHTML position值与相关jQuery DOM insertion functions的映射。

beforebegin / before

document.getElementById('foo').insertAdjacentHTML("beforebegin", "<hr>")
$('#foo').before("<hr>")

afterend / after

document.getElementById('foo').insertAdjacentHTML("afterend", "<hr>")
$('#foo').append("<hr>")

beforeend / append

document.getElementById('foo').insertAdjacentHTML("beforeend", "<hr>")
$('#foo').append("<hr>")

afterbegin / prepend

document.getElementById('foo').insertAdjacentHTML("afterbegin", "<hr>")
$('#foo').prepend("<hr>")

MDN页面的good visualization of what these mean如下所示：

<!-- beforebegin / before -->
<p>
  <!-- afterbegin / prepend -->
  foo
  <!-- beforeend / append -->
</p>
<!-- afterend / after-->

@Adam Terlson的answer中的错误是afterBegin和afterEnd被转置。

Answer 3

jquery使用各种函数来实现这一目标：

了解：
http://api.jquery.com/insertAfter/
http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
http://api.jquery.com/prependTo/
......还有更多

jQuery Manipulation API文档中的更多信息：
http://api.jquery.com/category/manipulation/

Answer 4

如果我理解正确，你想要追加到DOM元素的末尾

你可以使用jquery appendTo

这是文档http://api.jquery.com/appendTo/

Answer 5

以下是一个有效的例子。

$('<p class="border">PrependTo</p>').prependTo($('.main'));
    $('.main').prepend('<p class="border">Prepend</p>');

    $('<p class="border">AppendTo</p>').appendTo($('.main'));
$('.main').append('<p class="border">Append</p>');


$('<p class="border">Insert After</p>').insertAfter('.main');

$('<p class="border">Insert Before</p>').insertBefore('.main');

.border {
  border: 1px solid #000;
  margin: 10px;
  padding: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main border">
  <p>Main</p>
</div>