por alguna razón cuando se utiliza la función insertAdjacentHtml en FF obtengo insertAdjacentHTMl no es un error de función, ¿hay alguna alternativa a esto en jQuery u otra función javascript alternativa?insertAdjacentHtml en jquery
Respuesta
jQuery utiliza varias funciones para lograr este :
Lea:
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/
... y más
y más en la documentación de la API jQuery Manipulación:
http://api.jquery.com/category/manipulation/
Si he entendido bien, desea anexar al final de un elemento DOM
puede doit con jQuery appendTo
aquí es la documentación http://api.jquery.com/appendTo/
que depende de cómo se está usando.
.insertAdjacentHTML("beforeBegin", ...) //$('...').before(...)
.insertAdjacentHTML("afterBegin", ...) //$('...').after(...)
.insertAdjacentHTML("beforeEnd", ...) //$('...').append(...)
.insertAdjacentHTML("afterEnd", ...) //$('...').prepend(...)
http://api.jquery.com/prepend/
Código Ejemplo
$('<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>
Extender y @Adam Terlson correctas 's answer:
Así es el mapeo de insertAdjacentHTML
position
valores y la jQuery DOM insertion functions asociado.
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>")
La página MDN tiene una good visualization of what these mean que tiene este aspecto:
<!-- beforebegin/before -->
<p>
<!-- afterbegin/prepend -->
foo
<!-- beforeend/append -->
</p>
<!-- afterend/after-->
El error en @Adam Terlson 's answer fue que afterBegin
y afterEnd
se transpuso.
Aquí hay un ejemplo de trabajo sobre esto.
$('<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. ¿Qué tan bien se admite insertAdjacentHTML?
- 2. ¿Cómo es insertAdjacentHTML mucho más rápido que innerHTML?
- 3. ¿JQuery (..). Html() tiene errores en jQuery 1.3.2?
- 4. jQuery jquery-tmpl roadmap
- 5. Hacer clic en jquery
- 6. addEventListener en jQuery
- 7. vertical Parallax en jQuery
- 8. Rango en Javascript/jQuery?
- 9. jQuery - Céntrese en TR
- 10. jquery en rhino
- 11. Crear función en jquery
- 12. botón en jQuery diálogo
- 13. isset en jQuery?
- 14. jQuery en el widget
- 15. Jquery - error en jcarousel
- 16. Encadenando selectores en jQuery
- 17. contentDocument en jQuery
- 18. jQuery en persa
- 19. jQuery flotar en vivo
- 20. Desvinculación en jQuery
- 21. como .Contains en jQuery
- 22. Concatenar en jQuery Selector
- 23. jQuery en Firefox 4
- 24. ¿Qué significa $ ([]) en jQuery
- 25. addID en jQuery?
- 26. último hermano en jquery?
- 27. Crear elemento en Jquery
- 28. jQuery + ordenable + en vivo
- 29. Usando jQuery en jira
- 30. Usar jQuery en HTML
Hay un error crítico en el mapeo. 'afterBegin' y' afterEnd' se transponen. Agregué una versión corregida [aquí] (http://stackoverflow.com/a/40431232/168874) (ya que mi edición fue rechazada). –