由於某些原因,當在FF中使用insertAdjacentHtml函數我得到insertAdjacentHTMl不是函數錯誤,在jQuery中還有其他替代方法嗎?在jquery中插入AdjacentHtml
5
A
回答
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的操作API文檔中:
http://api.jquery.com/category/manipulation/
0
6
這取決於你如何使用它。
.insertAdjacentHTML("beforeBegin", ...) //$('...').before(...)
.insertAdjacentHTML("afterBegin", ...) //$('...').after(...)
.insertAdjacentHTML("beforeEnd", ...) //$('...').append(...)
.insertAdjacentHTML("afterEnd", ...) //$('...').prepend(...)
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>
4
爲了擴展和正確@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
照搬過來。
0
這是一個工作示例。
$('<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>
相關問題
- 1. 插入後選擇相同的新元素AdjacentHTML
- 2. 在JQuery中插入變量
- 3. 在JQuery中插入PHP
- 4. jquery tagify插入
- 5. jQuery的插入
- 6. jquery插入HTML
- 7. 插入jQuery的JS在Url.Route
- 8. 如何在jquery中插入div html?
- 9. 在jQuery中插入變量.css
- 10. 在div div組中插入Div div jQuery
- 11. 如何在jQuery中插入$變量
- 12. 如何在jQuery中插入PHP值Datepicker
- 13. 在jQuery語句中插入變量
- 14. 如何在jQuery中插入一個unicode?
- 15. 在php代碼中插入jquery
- 16. 在Jquery同位素中插入內容
- 17. 在jQuery中插入後更新DOMD
- 18. 在jquery中插入css background-image
- 19. 在html jquery中插入樹枝
- 20. 用jquery在span標記中插入break
- 21. 在gridview行中插入jquery滑塊
- 22. 如何在jQuery中插入php腳本?
- 23. 在Jquery $()。append()中插入javascript代碼。
- 24. 插入一個jQuery插件
- 25. 標籤插入jquery插件
- 26. 在web入門套件上插入jquery
- 27. 將輸入插入div jQuery
- 28. 插入後的jQuery
- 29. jQuery插入鏈接
- 30. JQuery插入屬性
有一個在映射一個嚴重的錯誤。 'afterBegin'和'afterEnd'轉置。我已經添加了一個更正版本[這裏](http://stackoverflow.com/a/40431232/168874)(因爲我的編輯被拒絕了)。 –