insertAdjacentHtml in jquery

Question

FFでinsertAdjacentHtml関数を使用しているときinsertAdjacentHTMlが関数エラーではありませんが、これはjQueryやその他の代替JavaScript関数の代替ですか？

Answer 1

jqueryのは、これを達成するための様々な機能を利用しています
http://api.jquery.com/insertAfter/
：約

読みますjQueryの操作APIドキュメントの
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
http://api.jquery.com/prependTo/
...ともっと

そして、もっと：
http://api.jquery.com/category/manipulation/

Answer 2

私は右理解していれば、あなたはあなたがここにjqueryのappendTo

でドイトできるDOM要素

の末尾に追加されるようにしたいがドキュメントhttp://api.jquery.com/appendTo/

Answer 3

それはあなたがそれを使用している方法によって異なります。

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

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 4

拡張し、正しい@Adam Terlsonのanswerするには、次の

ここinsertAdjacentHTMLposition値と関連する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があります。@Adam Terlsonのanswerで

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

間違いがafterBeginとafterEndが入れ替わったということでした。

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>