javascript jquery中的insertAdjacentHtml

insertAdjacentHtml in jquery

提问by anon

for some reason when using insertAdjacentHtml function in FF I am getting insertAdjacentHTMl is not a function error, is there an alternative to this in jQuery or some other alternative javascript function?

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

采纳答案by Marek Sebera

jquery uses various functions to achieve this :

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

Read about:
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/
... and more

阅读：
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/
...等等

And more in jQuery Manipulation API documentation:
http://api.jquery.com/category/manipulation/

以及更多 jQuery 操作 API 文档：http:
//api.jquery.com/category/manipulation/

回答by Adam Terlson

It depends on how you're using it.

这取决于你如何使用它。

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

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

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

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

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

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

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

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

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

---

---

Code Example代码示例

$('<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>

回答by gene_wood

To extend and correct @Adam Terlson's answer:

扩展和更正@Adam Terlson的回答：

Here's the mapping of insertAdjacentHTMLpositionvalues and the associated jQuery DOM insertion functions.

下面是insertAdjacentHTMLposition值的映射和相关的jQuery DOM 插入函数。

beforebegin/ before

beforebegin/ before

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

afterend/ after

afterend/ after

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

beforeend/ append

beforeend/ append

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

afterbegin/ prepend

afterbegin/ prepend

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

The MDN page has a good visualization of what these meanthat looks like this :

MDN 页面对这些含义进行了很好的可视化，如下所示：

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

The mistake in @Adam Terlson's answerwas that afterBeginand afterEndwere transposed.

@Adam Terlson的答案中的错误是，afterBegin并且afterEnd被调换了。

回答by RBCunhaDesign

Here is a working example on this.

这是一个关于此的工作示例。

$('<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>

回答by Juan Jo

if i understand right, you want to append at the end of a DOM element

如果我理解正确，您想在 DOM 元素的末尾附加

you can doit with jquery appendTo

你可以用 jquery appendTo 来做

here is the documentation http://api.jquery.com/appendTo/

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