如何使用 JS 获取完整的 HTML 标签并放入 textarea

Question

我正在努力获取 html 源代码值并将其放入特定的文本区域或 div 中，同时单击按钮。但我不会得到完整的 HTML 标签，它会导致开始标签是 Meta 标签，它会删除正确的 HTML 标签。我需要从 <!DOCTYPE html

获取整个 html 来源

这是我的演示

$('#save_editor').click(function(){
var full_value=$("#editor").html();
$('#write_html').val(full_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="editor"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>title</title> <style type="text/css"> // My style code </style> </head> </head> <body> <div>   <p>my body</p> </div> </body> </html> </div> <textarea id="write_html"></textarea> <button id="save_editor">save</button>

这是我的 Div 示例图片：我需要更改 div 颜色并更改 div 中的文本部分。如何使用 HTML 代码获取整个自定义 div。我的演示 FIDDLE。如何使用 Javascript 获得真正的源代码函数并将其放入特定的文本区域。

Answer 1

第一个标签之后的任何 html 标签都将被删除。要解决此问题，只需将您的模板代码放在隐藏的文本区域内，然后该值将按字面意思保留。

已更新 Fiddle：http://jsfiddle.net/j64r54rj/5/

$('#save_editor').click(function(){
var full_value=$("#editor textarea").val();
$('#write_html').val(full_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor"><textarea style="display: none;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>title</title> <style type="text/css"> // My style code </style> </head> </head> <body> <div>   <p>my body</p> </div> </body> </html> </textarea> </div> <textarea id="write_html"></textarea> <button id="save_editor">save</button>

Answer 2

我不确定 JQuery html() 是否会 return 你想要的。但是通过简单的 javascript 和一点点调整，您可以获得您期望的结果。

使用document.documentElement.outerHTML 可以获得除文档类型之外的所有源代码。然后，您可以使用 document.doctype 获取文档类型并将它们组合在一起，这样您就获得了完整的源代码。

如何使用 JS 获取完整的 HTML 标签并放入 textarea

How to get Complete HTML Tags and Placed into textarea using JS

html

javascript

tags

jquery

doctype