Question

我有以下DOM结构：

<textarea>
<form class="formClass">
   <input id="foo" type="text">
</form>
</textarea>

现在我想在输入后的新行中将一些文本附加到表单标记内容。我怎么能这样做？

我试过了：

$(".formClass").val("appended");
$(".formClass").val($(".formClass").val() + "appended");
$(".formClass").html("appended");
$(".formClass").text("appended");

没有效果。实际上，没有参数，当我尝试获取表单内容时，所有函数都返回undefined。

但是，将此（使用第二种方法）附加到textarea可以正常工作。但我想将它附加到表单标签。

Answer 1

你可以这样做：

var $textarea = $('textarea');
$textarea.val($($textarea.val()).append('appended').html());

请参阅 the working demo 。

重点是使用textarea的内容（通过.val（））构造一个jQuery对象，然后附加其他文本，然后将html分配回textarea。

Answer 2

问题是你选择了错误的元素

<强> HTML

<textarea id="textArea">
<form class="formClass">
   <input id="foo" type="text">
</form>
</textarea>

<强> JS

$("textArea").val($("textArea").val() + "appended")

试试这个

Answer 3

你不能。

现在表单不是html元素，它是textarea中的简单纯文本。

您可以先构建表单，添加文本，然后将val（）函数放入textarea。我用了一个跨度进行演示。

小提问我的解释： https://jsfiddle.net/z7wtzuz9/

<textarea></textarea>
<form class="formClass">
    <input id="foo" type="text" />
</form>

$("<span>").insertAfter($(".formClass input"));
$("textarea").val($("form").prop('outerHTML'));

之后不要忘记清理表格;）

Answer 4

为什么在插入动态创建的元素之前无法更新它？这很棘手，但应该有效。

$('textarea').val( $('textarea').val().replace('</form>', 'text foo </form>'));

或

var textarea=$('textarea'), 
    form=$(textarea.val()).append('some text');
textarea.val(form[0].outerHTML);

jsFiddle ：http://jsfiddle.net/cqze6fw5/

如何附加文本以形成标记内容

4 个答案: