javascript - 复制div内容并将其放置在其他地方

Question

我正在自定义公告板中创建一个报价系统。

我需要做的是复制一个 div 的内容，但将其放置在带有其他元素的文本区域中。

我可以使用 jQuery 来帮助我做到这一点吗？

我该怎么做？

Answer 1

操作字符串然后复制

这可能就是您想要的:

var stringContent = $("#SourceDivID").html();
$("#TextAreaID").val("This is content:\n" + stringContent);

然后你就可以轻松操纵你的 textarea内容随意。这将复制整个 DIV子树(包括所有元素)而不仅仅是文本内容。但你必须注意DIV的内容变成了一个字符串。

操作 HTML 元素然后复制

如果您想操作 HTML 元素，请按以下方式操作:

var div = $("#SourceDivID").clone();
// manipulate
$("#SomeSubElementID", div).append(/* add something inside at end */);
$("#SomeSubElementID", div).prepend(/* add something inside at start */);
div.before(/* add something in front */);
div.after(/* add something after it */);
...
// add to textarea
$("#TextAreaID").val(div.html());

使用 .text()或.html()

如果您只需要使用文本内容，则使用 .text()相反 .html() 。示例:

<div id="test">
    Some text <strong>emphasized.</strong>
</div>

其中每一个返回什么:

$("#test").text() => "Some text emphasized."
$("#test").html() => "Some text <strong>emphasized.</strong>"

将内容包装在新元素中

如果您想将整个内容包装在一个新元素中，然后复制(这对于论坛帖子来说很常见)，请按以下方式操作:

var div = $("divID").clone();
// wrap it
div = div.wrap("<quote/>").parent();
// display in textarea
$("textareaID").val(div.wrap("<div/>").parent().html());

为什么我们要包两遍？因为.html()只返回元素的内部 HTML。因此，如果我们也想返回包装内容，则必须再次包装它，然后显示新包装元素的内部 HTML。这是需要双重包装的唯一原因。

JSFiddle 示例

• 将所有文本换行在 [quote] 之间和[/quote] : click here
• 将所有元素包裹在 <quote> 内元素:click here