Search code examples
javascriptjqueryhtmltagsdoctype

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

I'm working to get a html source code value and place that into the particular textarea or div while clicking button. But i won't get entire HTML tags it results beginning tag is Meta tag and it will remove proper HTML tags. I need to get entire html source from <!DOCTYPE html

Here's my Demo 

$('#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>

Here my Working Div with sample Image: SAMPLE IMAGE I need to change that div color and change text section in that div. How do I get the entire customize div with the HTML code. My DEMO FIDDLE. How to get a real source code function using Javascript and place into particular textarea.

Solution

  • Any html tag after the first one will be removed. To fix this just place your template code inside of a hidden textarea, then the value will be preserved literally.

    Updated 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>