.html()返回空

时间:2011-11-11 10:28:54

标签: javascript jquery html

我正在使用Jquery作为我的Web应用程序,我正在创建一个数字更新框。为此,我将使用预定义的div替换输入<input type="text">字段。

事情是我想得到原始输入框的html,因为它可能有样式等添加,我希望我的.replaceWith版本也有。

e.g。
当前代码<input type="text">
新代码

<div>
   <input type="text">
   <div>
      <!-- Other Stuff -->
   </div>
</div>

因此,您可以看到我需要在创建父元素的同时重新生成输入控件。我目前这样做的方法就是重新生成所有内容并使用.replaceWith()方法将其全部粘贴。

任何想法?

5 个答案:

答案 0 :(得分:3)

我不完全确定您要尝试做什么,但看起来您希望在div周围包裹父input,并在其后添加另一个div 。如果是这种情况,你可以这样做:

$("input").wrap("<div></div>").after("<div></div>");

这样,您无需替换input,因为它将保留在DOM中。 wrap将围绕所选元素包装参数,after将在所选元素之后插入内容。

这是working example

答案 1 :(得分:1)

input类型的元素并不真正包含 HTML,而是input标记将是其父容器中包含的HTML(div在这种情况下)。因此,您可以考虑将其放置在专用的内部容器中,然后将其移除并替换它。

答案 2 :(得分:1)

jQuery的.html()如果在<input>元素上使用它,则返回空,因为它没有内容,只有属性。

  

我想获得原始输入框的html,因为它可能有样式等添加

您可以获取原始输入框的styleclass属性,然后将其应用于生成的<div>元素,例如:

$("someselectorforyournewdiv").addClass( $("input").attr("class") );
// and/or
$("someselectorforyournewdiv").attr( "style", $("input").attr("style") );

(显然调整选择器以适应。)

但是你生成的元素不会有自己的样式来制作一个漂亮的“上升框”吗?如果你从输入中应用原始样式也可能效果不好,除非你挑选出某些不会影响形状的样式,比如颜色或那种东西。

答案 3 :(得分:0)

可能你使用了错误的选择器

提供您的输入或任何ID,然后执行

$('input#yourid').replaceWith('Insert your desired html');

参考JQuery API

答案 4 :(得分:0)

<input />元素不是容器,因此它不具有HTML值。如果您正在使用框中输入的文字,请改用.val()方法。