CODEWITHSUNDEEP
javascriptjquery
anon
anon

Reputation: 1117

insertAdjacentHtml in jquery

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?

Upvotes: 12

Views: 25601

Answers (5)

Adam Terlson
Adam Terlson

Reputation: 12730

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/after/

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

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>

Upvotes: 22

Raphael Cunha
Raphael Cunha

Reputation: 1114

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>

Upvotes: 0

gene_wood
gene_wood

Reputation: 2073

To extend and correct @Adam Terlson's answer :

Here's the mapping of insertAdjacentHTML position values and the associated 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>")

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

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

The mistake in @Adam Terlson's answer was that afterBegin and afterEnd were transposed.

Upvotes: 10

Marek Sebera
Marek Sebera

Reputation: 40671

jquery uses various functions to achieve this :

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

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

Upvotes: 4

Juan Jo
Juan Jo

Reputation: 892

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

you can doit with jquery appendTo

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

Upvotes: 0

Related Questions