javascript - jquery 中的 insertAdjacentHtml

Question

出于某种原因，在 FF 中使用 insertAdjacentHtml 函数时出现 insertAdjacentHTMl is not a function 错误，在 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>