Question

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

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

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

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

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

任何想法？

Answer 1

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

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

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

这是working example。

Answer 2

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

Answer 3

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

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

您可以获取原始输入框的style和class属性，然后将其应用于生成的<div>元素，例如：

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

（显然调整选择器以适应。）

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

Answer 4

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

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

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

参考JQuery API

Answer 5

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

.html（）返回空

5 个答案: