0

I'm working on a form builder website. After a form is built it must be saved in database. When the user clicks on a form name from the list of saved forms the form information is restored from database. One of the variables I will restore is the structure of the form. In javascript I wrote these lines of code:

var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>    </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);

document.write(prefix_content + dynamic_content + sufex_content  );

The variable dynamic_content contains the dynamic structure. The problem is that prefix_content and sufex_content is displayed as html but dynamic_content is written in the page as text. Any one knows why is that or knows how to solve this problem.

Note: when I write the text in dynamic content statically between single quotes it is displayed as html not text.

Luma Sharabati
  • 21
  • 2
  • Have you try to remove the String() operator? It is just a guess... I mean: document.write(prefix_content + text_content + sufex_content ); – Jacek Kowalewski Nov 23 '14 at 07:40
  • No I can't because the type of text_content is object it cant be displayed if i remove string – Luma Sharabati Nov 23 '14 at 07:48
  • Can you elaborate your need to do in such a manner? I don't see a proper use case of this. I may be wrong but I'd like to know your views on this. – Rupam Datta Nov 23 '14 at 07:48
  • What do you mean by "*HTML Elements displayed as text*"? What is the actual text that's displayed? – David says reinstate Monica Nov 23 '14 at 07:52
  • 1
    HAve YOu tried not to use document.write? http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice, https://developer.mozilla.org/en-US/docs/Web/API/document.createElement – Jacek Kowalewski Nov 23 '14 at 07:53
  • If the dynamic_content contains

    shahd

    it must be diplayed as shahd, but it is displayed as a text

    shahd

     – Luma Sharabati Nov 23 '14 at 07:56
  • 1
    There was NOT to use ;)... Document write just writes to document, and does not modify the DOM tree. I know this isn;t an answer, but maybe switching to more modern method will give a good result. – Jacek Kowalewski Nov 23 '14 at 07:58
  • but the content in prefix_content and sufex_content is displayed as dom which means that document.write do what i want – Luma Sharabati Nov 23 '14 at 08:01
  • Sry my fault, You are right. But however according to that link: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice, maybe You should try to modify DOM in another way? And You must double check what String projection really do for this undescribed type of object (text_content). I think this projection is the clue... – Jacek Kowalewski Nov 23 '14 at 08:06
  • Maybe this will help? http://stackoverflow.com/questions/16222786/string-building-with-javascript-document-write – Jacek Kowalewski Nov 23 '14 at 08:08
  • 3
    The issue depends on the value of the `text_content` variable, which is not set (or even declared) in the code or described in the text. – Jukka K. Korpela Nov 23 '14 at 08:23

3 Answers3

0

TRY THIS:

var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>    </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
var parser = new DOMParser();
var el = parser.parseFromString(dynamic_content, "text/html");

document.write(prefix_content + el + sufex_content  );

Or you can try this too: Using jQuery

var dynamic_content=String(text_content);
var el = $.parseHTML( dynamic_content );
document.write(prefix_content + el + sufex_content  );
jGupta
  • 2,175
  • 4
  • 21
  • 48
0

If you're seeing the content retrieved from your database as plaintext, instead of HTML, its HTML entities are probably getting escaped somewhere along the way. Check the contents of your text_content variable (e.g. use console.log(text_content) and if you're seeing stuff like &lt;div&gt; instead of <div>, go on and find out where your escaping happens and either remove it or manually unescape.

Community
  • 1
  • 1
hon2a
  • 6,515
  • 5
  • 38
  • 52
0
var content = "<div style='color:red;'>TEST</div>";


var prefix ='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>TEST</title>\n</head>\n<body>\n';
var suffix ='\n</body></html>';
var all = prefix + content + suffix;
var parser = new DOMParser();
var doc = parser.parseFromString(all, "text/html");


console.log(doc.children[0].outerHTML);

Instead of children[0] you can also go for:

doc.documentElement.outerHTML

Results in:

<html lang="en-US"><head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div style="color:red;">TEST</div>
</body></html>
Roko C. Buljan
  • 164,703
  • 32
  • 260
  • 278