從復雜的HTML字符串創建DOM元素

Question

是否可以從包含鏈接，樣式，腳本和注釋的HTML字符串創建DOM ？

在我的應用程序中，最終用戶將粘貼一些表單代碼，例如：

<!-- Start comment -->
<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #full_name{background:#fff; }
    /* This is
    another comment*/
</style>
<div>
<form action="process.php" method="post">
Full Name:<input type="text" name="full_name">
</form> 
</div>
<script type='text/javascript' src='test.js'></script>
<!-- End comment -->

這是jQuery代碼：

$('#html-go').click(function (e) {
    e.preventDefault();
    var html_code = $('#html-code').val(),
        obj = $('<div/>').html(html_code).contents();
    alert(obj.attr("action"));
});

我想將其加載到DOM元素中進行解析，但出現undefined錯誤。 如果表單代碼僅包含標簽之間的代碼，則一切正常。

這是顯示錯誤的JSFiddle （粘貼上面的表單代碼）。

Answer 1

您需要將表格放入新創建的div中：

alert(obj.find('form').attr("action"))

看到這個JSFiddle 。

Answer 2

$('#html-go').click(function (e)
    {
        e.preventDefault();
        var html_code = $('#html-code').val();
        console.log(html_code);
        obj = $('<div/>').html(html_code).contents();
        alert($(html_code).attr('action'));
    });