如何从节点或 HTMLElement 获取 html？ [复制]答案

【问题标题】：How to get html from node or HTMLElement? [duplicate]如何从节点或 HTMLElement 获取 html？ [复制]
【发布时间】：2014-11-07 05:55:22
【问题描述】：

我正在尝试将 Node 或 HTMLElement 的纯 html 转换为字符串，但我似乎无法获得控制台中显示的正确结果。这意味着只是 html 元素，而不是子元素......

代码

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]);
});

我只是想知道你们中是否有人成功地做到了这一点！

演示：http://jsfiddle.net/0xfwLfwj/1/

编辑更新了 fiddle 并提供了更好的解释：http://jsfiddle.net/ttoom9hc/10/

【问题讨论】：

你为什么使用eventData？ jQuery 为您修复 IE 问题。
尝试$elm[0].innerHTML 或$elm[0].outerHTML 获取HTMLElement 实例的html。不确定在 Node 实例的情况下要做什么。
也许是this.get(0);
这样做可行，但它也会读取它的子元素。我只需要实际的 HTML 元素。也许有办法避免子元素？

标签： javascript jquery string parsing dom

【解决方案1】：

如果这是你想要显示的 -

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

那么这就是它的一段代码-

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

这是fiddle

【讨论】：

我的问题好像漏了一行。我只需要当前元素中的字符串，而不是子元素。
那么你想达到什么输出？
我更新了这篇文章以更好地解释所需的输出。/

【解决方案2】：

你试过了吗

$elm.html()

这应该会给你那个元素的 HTML 作为一个字符串。 http://api.jquery.com/html/

【讨论】：

这样做可行，但它也会读取它的子元素。我只需要实际的 HTML 元素。也许有办法避免子元素？