Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nest html tags inside html

Tags:

html

I am building a platform where people can send emails - to display a preview of the emails, I use a div below the form where they can type the message.

So the general structure looks like this:

<html>
    <body>
         <form>
              <!-- Form to enter email here -->
         </form>
         <div>
              <!-- Email preview here -->
              <html>
                   <!-- Email content, updated everytime user types something --->
              </html>
         </div>
    </bod>
</html>

However, simply using the html tags inside the html document itself seems to confuse every browser - also, it doesn't seem very clean.

Since the email that is sent will be a whole html document of its own, it would be the easiest to just put all that inside the div.

How can I do that in a valid, clean way?

like image 636
weltschmerz Avatar asked Aug 05 '12 14:08

weltschmerz


People also ask

Can I have HTML tag inside HTML tag?

With HTML, you can easily add HTML tag inside a table. The tag should open and close inside the <td> tag. For example, adding a paragraph <p>…

Can you nest tags in HTML?

HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements.

How do you nest in HTML?

When you insert (nest) one tag within another, pay attention to the order in which you open each tag, and then close the tags in the reverse order. If you open element A and then element B, you must first close B before closing A.

What is nesting code in HTML?

HTML elements can be nested, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content. For example, try pasting the following code snippet inside your index.html file: <strong>My bold text and <em>my bold and emphasized text</em></strong>


2 Answers

Use an iframe. You can write dynamic content to them - you don't always have to load physical pages into them with an src attribute.

HTML:

<iframe name='preview'></iframe>

JS (inside DOM-ready callback)

var doc = document.preview.open("text/html","replace");
doc.write('<html><body><p>this is some content</p></body></html>');
doc.close();
like image 112
Mitya Avatar answered Oct 09 '22 02:10

Mitya


You can't get this around using the approach you have used. Getting emails rendered in mail clients is a chalenge, You may want to use an iframe instead. However you have to make sure that the contents of an email copy have to be fully in a table layout format.

like image 35
defau1t Avatar answered Oct 09 '22 01:10

defau1t