JQuery .html()打印准确的html代码

Question

我有一个文本区，我正在填充html代码，供人们从中剪切和粘贴。这个文本区域是使用JQuery和.html()“填充”的。"population“来自页面上其他地方的<div>示例：

“容纳”人口的Div

<div id="populationhold">this is the html to copy</div>

然后“魔术的JQ”到“点击”按钮并填充文本区

$('#button').click(function(){ 
updatefunction();
});

updatefunction有点像这样：

function updatefunction(){
$('#textarea').html( $('#populationhold').val(); });
}

现在，如果我尝试用这样的东西填充：

$('#textarea').html( 'this is the <br />html to copy');

.html()将只打印<br>，而不打印<br />。我已经尝试过(以我的方式用<br \/>转义，但这不起作用。请提供建议，因为我必须“生成”干净的XHTML代码，而不仅仅是HTML4代码。

下一步是prob。相同的，但有点复杂-因此上面引出了这一点。

作为my site的“用户”，您将能够在代码示例中添加/删除位：

<div id="populationhold">
<div class="codebit1">this is the <br />html to copy</div>
\n<br/>\
<div class="codebit2">this is more <br />html to copy</div>
</div>

$('#button').click(function(){ 
$('#textarea').html( $('#populationhold').val(); 
});

填充文本区域很好，可以正常工作，"90%“的删除也是如此。大概是这样的：

$('#deletebutton').click(function(){     
$('.codebit1').remove(); 
// This removes .codebit1 from #populationhold and runs the update to ummm update the textarea with the update function 
// Note: remove() is OK in this case as #codebit1 is totally dynamically created
updatefunction();
});

这里的问题是，我可以删除/删除需要删除的部分-因此是"90%“，但我如何摆脱”现在孤立的“\n<br/>\n，它过去用来分隔#textarea中的两个div。好吧，我可以在没有\n<br/>\n的情况下做到这一点，但它会让代码复制得“不整洁”，这就是\n<br/>\n存在的原因--而且\n<br/>\n确实确保了当代码被实际复制时，用户会得到一个合理的布局。

Answer 1

我认为你所做的是不正确的。

<textarea>是一个多行输入对象。因此，您不希望使用$('#textarea').html()函数(我认为它甚至不存在于<textarea>中)，但是您希望使用$('#textarea').val()函数来更新它的内容。

如果你使用$('#textarea').val( 'this is the <br />html to copy')，你会得到正确的结果。

另一方面，您确实希望对$('#populationhold')对象使用.html()而不是.val()，因为您要检索它的值及其子对象。

关于innerHTML和XHTML

XHTML和innerHTML不是朋友。他们只是不能在一起工作。如果您将文档作为xhtml/xml提供，那么您就有麻烦了。在XML中使用innerHTML是没有意义的。

<element>value
 <child>childvalue</child>
</element>

innerHTML只是一个函数，它获取元素的值，然后连接它的子元素的名称和值……这只是一些字符串操作。

半解决方案

Steve Tucker创建了一个innerXHTML函数。你可以在这里看到它的工作原理：

http://jsfiddle.net/pYUD4/10/

但是，有一件事可以将<br />转换为<br></br>，但就我而言，这就是有效的XHTML.我将尝试编写一个能很好地完成这项工作的函数，因为现在似乎没有办法做到这一点。但这可能需要一些时间，xD