使用没有子元素的javascript将HTML元素DOM作为字符串获取

时间:2014-09-16 18:58:15

标签: javascript jquery filter tostring

我想知道是否有任何方法可以获取没有子元素作为字符串的html元素/节点。
这个问题似乎与此问题重复:jQuery, get html of a whole element 但我只想把html元素本身作为一个字符串,没有它的孩子

texts.push({title:'[#target, outerHTML]', value: $input[0].outerHTML});
texts.push({title:'[#target, $.html()]', value: $input.html()});

texts.push({title:'[#bigger_Target, outerHTML]', value: $('#bigger_Target')[0].outerHTML});
texts.push({title:'[#bigger_Target, $.html()]', value: $('#bigger_Target').html()});

texts.push({title:'[#target, DESIRED]', value: '<input class="test" data-type="text only" type="button" value="Test />"'});
texts.push({title:'[#bigger_Target, DESIRED]', value: '<div id="bigger_Target" />'});

FIDDLE:
http://jsfiddle.net/ttoom9hc/12/

来自其他帖子的FIDDLE:
http://jsfiddle.net/u6avkvz0/

1 个答案:

答案 0 :(得分:6)

我能想到的最简单的方法是使用DOM cloneNode将其克隆为浅层,然后获取outerHTML

var element = $("selector for the element you want");
var html = element[0].cloneNode(false).outerHTML;

Example (我自己做的,是那个小提琴复杂的)


或者使用更多jQuery:Example

var html = $("selector for the element you want")
               .clone()
               .contents()
               .remove()
               .end()[0].outerHTML;

请注意,元素内的文本是“child”内容(特别是一个或多个Text节点子元素)。如果你想要那些,你需要一个循环。 jQuery的contents可以帮助那里:Example

var html = $("selector for the element you want")
        .clone()
        .contents()
        .each(function() {
          if (this.nodeType !== 3) { // It's not a Text node...
            $(this).remove();        // ...nuke it
          }
        })
        .end()[0].outerHTML;