Get Raw HTML of Node in JQuery

问题

I have used $("#parent").html() to get the inner html of #parent, but how do I get the html of the parent itself?

The use case is, I grab an input node like this:

var field = $('input');

I would like to be able to get the raw html of that node (<input type='text'>) with something like field.html(), but that returns empty. Is this possible?

回答1:

Or you could create add an JQuery function like this:

jQuery.fn.outerHTML = function(s) {
  return (s)
  ? this.before(s).remove()
  : jQuery("<p>").append(this.eq(0).clone()).html();
}

so you could do this:

$('input').outerHTML();

$('input').outerHTML("new html");

thanks to http://yelotofu.com/2008/08/jquery-outerhtml/

回答2:

It's somewhat awkward to do:

var field = $("input"); // assuming there is but 1
var html = field.wrap("<div>").parent().html();
field.unwrap();

html() is analagous to innerHTML. There is no "standard" outerHTML method. The above wraps the element you want in a temporary element and gets the innerHTML of it.

回答3:

This question is very old, but there is now an easy solution:

const html = $('input').prop('outerHTML');

Example string value of html:
<input type="input">

Fiddle with it:
https://jsfiddle.net/u0a1zkL1/3

And, the technique mentioned in Optimae's comment also works:

const html = $('input')[0].outerHTML;

回答4:

You can use:

var html = $('#parent')[0];

That will get the #parent node, then return the code of the first node returned (which will be the only one in this case).

来源：https://stackoverflow.com/questions/2779630/get-raw-html-of-node-in-jquery

标签

jquery

html

selector