Question

我有一个隐藏的div，我正试图让这个div与样式。当我使用下面的代码附加这个div时，它会附加样式。请以其他方式提出建议。

    var warningMessage = $('#warningDiv').html()


function postSettings() {
    var frm_data = $("#MyForm").serialize();
    $.ajax(
        {
            type: "POST",
            url: "path",
            data: frm_data,
            success: function (successData) {
                var warningMessage = $('#warningDiv').html();
                **$(warningMessage).insertAfter("#MyDiv"); // This is not showing the warning message with css styles .** 
            },

        });
}

这给了HTML没有样式，但我也想要样式，需要动态地将它与另一个div相加。这是div：

<div class="note note-warning" id="warningDiv" style="display:none">
    <div class="block-warning">
        <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4>
        <p> test</p>
    </div>
</div>

Answer 1

请尝试使用以下代码段。

出于测试目的，我已删除＆＃39; display：none＆＃39;来自div＆quot; warningDiv＆＃39;。

的财产

html , body 
{
height : 100%;
}

我已删除＆＃39; display：none＆＃39;来自新创建的div的财产。

<!doctype html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {

        });
        function postSettings() {
            $($("#warningDiv").prop('outerHTML')).insertAfter("#MyDiv");
        }
    </script>
</head>
<body>
    <div class="note note-warning" id="warningDiv" style="color: red;">
        <div class="block-warning">
            <h4 class="block"><i class="demo-icon icon-attention-1 fa"></i>Warning! Some Header Goes Here</h4>
            <p>test</p>
        </div>
    </div>
    <div>
        <input type="button" onclick="postSettings()" value="Click here to call postSettings()" />
        <div id="MyDiv">MyDiv</div>
    </div>

</body>
</html>

如果有任何疑虑，请告诉我。

Answer 2

尝试使用bellow

    var warningMessage = $('#warningDiv');
    var rowData='<div class="note note-warning" id="warningDiv"style="display:none"> <div class="block-warning"><h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4><p> test</p></div></div>';
warningMessage.append(rowData);

Answer 3

试试这个

var warningMessage = $('#warningDiv').get(0).outerHTML;

使用样式获取隐藏的div元素html内容

3 个答案: