How to get html from node or HTMLElement?

Question

I'm trying to convert the pure html of a Node or HTMLElement to string but i can't seem to get the right result as shown in the console. That means just the html element, not it's child elements...

CODE

function eventData(e){
    return {
        'sender': e.srcElement || e.target,
        'event': e || window.event,
    };
};

$(document).ready(function(e){
    var $elm = $("<input class='test' data-type='text only'/>").attr({'type':'button','value':'Test'});
    $elm.appendTo('#target');
    $elm.click(function(e) { alert(eventData(e).sender.value); });
    $('#asHTML').text($elm[0].toString());

    //Console is the best way to display a node object;
    //Open your console to see the result;
    console.log($elm[0]);
});

I'm just wondering if any one of you has successfully done this!

DEMO: http://jsfiddle.net/0xfwLfwj/1/

EDIT Updated fiddle with better explanation: http://jsfiddle.net/ttoom9hc/10/

Why do you use `eventData`? jQuery fixes IE problems for you. — Oriol, Sep 13 '14 at 00:32
Try `$elm[0].innerHTML` or `$elm[0].outerHTML` to get the html of an `HTMLElement` instance. Not sure what you want to do in case of `Node` instances. — Oriol, Sep 13 '14 at 00:37
Doing this works, but it also reads it's child elements. I only need the actual HTML element. Maybe there's a way to avoid the child elements? — Jeroen Vorsselman, Sep 15 '14 at 22:00

score 0 · Answer 1 · answered Sep 13 '14 at 00:58

0

If this is what you want to display -

<input class="test" data-type="text only" type="button" value="Test">

Then this is the piece of code for it -

$('#asHTML').text($elm[0].outerHTML);

Here is a fiddle

answered Sep 13 '14 at 00:58

Ramiz Wachtler

5,623
2
28
33

It seems that my question missed a line. I only need the string from the current element, not it's child elements. – Jeroen Vorsselman Sep 15 '14 at 00:01
so what output you want to achieve? – Ramiz Wachtler Sep 15 '14 at 00:05
I've updated this post to better explain the desired output./ – Jeroen Vorsselman Sep 15 '14 at 22:06

score 0 · Answer 2 · answered Sep 13 '14 at 01:01

0

have you tried

$elm.html()

That should give you the HTML of that element as a string. http://api.jquery.com/html/

answered Sep 13 '14 at 01:01

jcruz

718
6
13

Doing this works, but it also reads it's child elements. I only need the actual HTML element. Maybe there's a way to avoid the child elements? – Jeroen Vorsselman Sep 15 '14 at 00:04

How to get html from node or HTMLElement?

2 Answers2