可以在 div 中渲染 DOM 吗？答案

【问题标题】：It is possible to render a DOM in a div?可以在 div 中渲染 DOM 吗？
【发布时间】：2017-11-09 18:50:55
【问题描述】：

我正在使用电子邮件服务，该服务以以下形式为我提供邮件正文

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.= w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=3D "http://www.w3.= org/1999/xhtml">

<head>
    <meta http-equiv=3D "Content-Type" content=3D "text/html; charset=3Dutf-8">
    <title>How's it going? </title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=3DRoboto:300);
        /*Calling our web font*/
        /* Some resets and issue fixes */

        #outlook a {
            padding: 0;
        }
        body {
            width: 100% !important;
            -webkit-text;
            size-adjust: 100%;
            -ms-te xt-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }
        =20 .ReadMsgBody {
            width: 100%;
        }
        .ExternalClass {
            width: 100%;
        }
        =20 .backgroundTable {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            !important;
        }
         =20 table td {
            border-collapse: collapse;
        }
        .ExternalClass * {
            line-height: 115%;
        }
        =20=20
        /* End reset */

        =20
        /* These are our tablet/medium screen media queries */

        @media screen and (max-width: 630px) {
            =20
            /* Display block allows us to stack elements */

             =20 *[class=3D"mobile-column"] {
                display: block;
            }
            =20=20
            /* Some more stacking elements */

            *[class=3D"mob-column"] {
                float: none !important;
                width: 100% !im portant;
            }
            =20=20
            /* Hide stuff */

            *[class=3D"hide"] {
                display: none !important;
            }
            =20=20
            /* This sets elements to 100% width and fixes the height issues= too, a god send */

            *[class=3D"100p"] {
                width: 100% !important;
                height: auto !importan t;
            }
            =20=20
            /* For the 2x2 stack */

            =20 *[class=3D"condensed"] {
                padding-bottom: 40px !important;
                display : block;
            }
            =20
            /* Centers content on mobile */

            *[class=3D"center"] {
                text-align: center !important;
                width: 100% ! important;
                height: auto !important;
            }
            =20=20
            /* 100percent width section with 20px padding */

            *[class=3D"100pad"] {
                width: 100% !important;
                padding: 20px;
            }
            =20=20
            /* 100percent width section with 20px padding left & right */

            *[class=3D"100padleftright"] {
                width: 100% !important;
                padding: 0 20px 0 20px;
            }
            =20=20
            /* 100percent width section with 20px padding top & bottom */

            *[class=3D"100padtopbottom"] {
                width: 100% !important;
                padding: 20 px 0px 20px 0px;
            }
            =20=20=20
        }
    </style>
    <style type=3D "text/css">
    </style>
</head>

<body> =20
    <table>
        <tr>
            <td style=3D "padding: 0 10px;"> =20
                <div class=3D "mktEditable" id=3D "content" style=3D "font-family: Arial, = sans-serif; font-size:14px; line-height:20px; color:#2e2e2e; font-weight:no= rmal; ">
                    <p style=3D "font-size: 12px;"> </p>
                    <p> =20 Hey,
                        <br> Thanks for taking the time to evaluate amoCRM. Our mission is helping sales= teams accomplish more by giving them the proper place to manage their work= . I hope we can do that for you too. </p>
                    <p> I was told that you aren=E2=80=99t really enjoying the first days of your t= rial - just hit reply, and let me know about your main goal. I=E2=80=99ll c= onnect you with the right person to fine-tune amoCRM to fit your needs. </p=> Thank you and best regards,
                        <br> Egor Kovalchuk
                        <br> CEO, amoCRM </div>
            </td>
        </tr>
    </table> =20 <img src=3D "https://mandrillapp.com/track/open.php?u=3D30051581&amp;id=3Dd8= bfb7221bf8403c8d63e2375a2dd6a4" height=3D "1" width=3D "1">
    <center>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <table border=3D "0" cellpadding=3D "0" cellspacing=3D "0" width=3D "100%"=i d=3D "canspamBarWrapper" style=3D "background-color:#FFFFFF; border-top:1px = solid #E5E5E5;">
            <tr>
                <td align=3D "center" valign=3D "top" style=3D "padding-top:20px; = padding-bottom:20px;">
                    <table border=3D "0" cellpadding=3D "0" cellspacing=3D "0" id==3D "canspamBar">
                        <tr>
                            <td align=3D "center" valign=3D "top" style=3D "color:= #606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-hei= ght:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-a= lign:center;"> This email was sent to <a href=3D "mailto:vasily= ev.alexander@hotmail.com" target=3D "_blank" style=3D "color:#404040 !importa= nt;">vasilyev.alexander@hotmail.com</a> &nbsp;&nbsp; <a href=3D "https://mandrillapp.com/track/click/= 30051581/mandrillapp.com?p=3DeyJzIjoiRVA5WWVBVkt3eVl4UEI2TmJfWkdNUU9UcVg0Ii= widiI6MSwicCI6IntcInVcIjozMDA1MTU4MSxcInZcIjoxLFwidXJsXCI6XCJodHRwOlxcXC9cX= FwvbWFuZHJpbGxhcHAuY29tXFxcL3RyYWNrXFxcL3Vuc3ViLnBocD91PTMwMDUxNTgxJmlkPWQ4= YmZiNzIyMWJmODQwM2M4ZDYzZTIzNzVhMmRkNmE0Lmp6WlBnZVVWRWg1Y01nRTNLJTJCbFlqaDh= QbVE0JTNEJnI9aHR0cHMlM0ElMkYlMkZtYW5kcmlsbGFwcC5jb20lMkZ1bnN1YiUzRm1kX2VtYW= lsJTNEdmFzaWx5ZXYuYWxleGFuZGVyJTI1NDBob3RtYWlsLmNvbVwiLFwiaWRcIjpcImQ4YmZiN= zIyMWJmODQwM2M4ZDYzZTIzNzVhMmRkNmE0XCIsXCJ1cmxfaWRzXCI6W1wiODdmOTIzZjE4Mjg2= ZmM5NzgwMGE1NzA3ZWEyMDJjM2EwNDUwMGZhNFwiXX0ifQ" style=3D "color:#404040 !imp= ortant;">unsubscribe from this list</a> </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <style type=3D "text/css">
            @media only screen and (max-width: 480px) {
                table[id=3D"canspamBar"] td {
                    font-size: 14px !important;
                }
                table[id=3D"canspamBar"] td a {
                    display: block !important;
                    margin- top: 10px !important;
                }
            }
        </style>
    </center>
</body>=20

</html>

我需要在我的客户端页面上的 div 下将其呈现为 html。有没有可能这样做

--为澄清而编辑，不能在一行中阅读此内容

【问题讨论】：

标签： javascript html email dom iframe

【解决方案1】：

在javascript中使用document.getElementById("divid").innerHTML(response)

如果您使用 jquery，您可以使用 $("#div_id").html(response); 在 div 上加载 html 在这个例子中我没有给你 html 代码，因为它是非常大的字符串，我不能在这里的代码中使用它。

var response = '<html><body><h3>This is Your Response</h3></body></html>';


$("#email").html(response);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="email"></body>

【讨论】：

【解决方案2】：

您可以创建一个 iframe，将您的 HTML 存储在一个 JS 变量中并将其放入您的 iframe 中：

var myHtml = '<html>...</html>';

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(myHtml);
doc.close();

【讨论】：

【解决方案3】：

为什么不使用 iFrame？以下是在 iFrame 中插入 HTML 的方法：

var insertTo = document.querySelector('div#emailContent');
var iframe = document.createElement('iframe');
document.body.appendChild(insertTo);
var emailDoc = iframe.contentWindow.document;
emailDoc.open();
emailDoc.write(
    '<!doctype html>' +
    '<html>' +
    '<head>' +
        '<style>/* styles go here */</style>' +
    '</head>' +
    '<body><!-- content goes here ---></body>' +
    '</html>'
);
emailDoc.close();

【讨论】：

我想尽可能避免使用 iframe。
@Nicholas，好的，但请记住，您插入到
中的任何内容都会泄漏到您的主文档中。例如，如果您在插入的 html 中有一些样式，它们将应用于整个文档，甚至在
之外。这不会是的问题。我也认为将或放入 <div>; 是无效的。每个文档只能定义一次。 </div>
这是一个很好的观点。我会检查一下，如果有必要，我会使用你的解决方案，因为它也很有效