Creating a DOM element from a complicated HTML-string

Question

Is it possible to create a DOM from an HTML string that includes link, style, script and comments?

In my app, the end user will be pasting some form code, for example:

<!-- 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 -->

This is the jquery code:

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

I want to load it into a DOM element for parsing but I get an undefined error. If the form code contains only that between the tags, then everything's OK.

Here's a JSFiddle that shows the error (paste the form code above).

yes, you can stuff any html you want into a .html() call, and the JS engine will slice/dice it into the DOM. just make sure it's VALID html. if you stuff in bad/broken html, the browser will try to correct it as best it can, and probably not do what you think it should be doing. — Marc B
– Marc B, Commented Aug 5, 2015 at 14:37
that being said, obj will be the div you created with $('<div/>'), and it has no attribute. you probably want obj.find('form') or whatever. — Marc B
– Marc B, Commented Aug 5, 2015 at 14:39
Right, right. I completely overlooked that. Thanks so much :) — Damon Malkiewicz
– Damon Malkiewicz, Commented Aug 5, 2015 at 14:44

Reto Aebersold · Accepted Answer · 2015-08-05 14:40:58Z

1

You need to get your form inside your newly created div:

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

See this JSFiddle.

answered Aug 5, 2015 at 14:40

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.G · Accepted Answer · 2015-08-05 14:56:39Z

0

$('#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'));
    });

answered Aug 5, 2015 at 14:56

A.G

482 bronze badges

1 Comment

A.G Over a year ago

you can also get the attribute value directly from html_code variable

Collectives™ on Stack Overflow

Creating a DOM element from a complicated HTML-string

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related