jQuery before() 输出为字符串而不是 HTML

Question

我正在尝试使用一些简单的 jQuery 在 Gravity Forms 上的输入之前注入一些 HTML。

这是我的代码：

var formInputs = jQuery( "form li input" )

formInputs.each(function( index ) {
  this.before('<h1>Hello, world!</h1>');
});

这是每个输入的样子

是否与重力形式存在某种形式的冲突？

编辑：我尝试替换

this.before('<h1>Hello, world!</h1>');

与

this.before(jQuery('<h1>Hello, world!</h1>'));

我得到的是 jQuery 对象

Answer 1

this 在 jQuery.each() 方法中引用的是 JavaScript 对象，而不是该元素的 jQuery 对象，因此如果您想在该元素上使用任何 jQuery 方法，您必须用 jQuery 包装它。

var formInputs = jQuery( "form li input" )

formInputs.each(function( index ) {
  jQuery(this).before( document.createTextNode('<h1>Hello, world!</h1>') );
});

如果你想转义 html 并输出为纯文本，那么document.createTextNode 方法可以帮助你。将您的代码更新为以下内容。

var formInputs = jQuery( "form li input" )

formInputs.each(function( index ) {
  jQuery(this).before( document.createTextNode('<h1>Hello, world!</h1>') );
});

Answer 2

你试过了吗？

jQuery('<h1>Hello World!</h1>').insertBefore(this);

https://jsfiddle.net/r181ohtj/