How to Get a HTML Element from a String with Jquery

How to get a HTML element from a string with jQuery

Yes, you can turn the string into elements, and select elements from it. Example:

var elements = $(theHtmlString);
var found = $('.FindMe', elements);

How do you convert a jQuery object into a string?

I assume you're asking for the full HTML string. If that's the case, something like this will do the trick:

$('<div>').append($('#item-of-interest').clone()).html(); 

This is explained in more depth here, but essentially you make a new node to wrap the item of interest, do the manipulations, remove it, and grab the HTML.

If you're just after a string representation, then go with new String(obj).

Update

I wrote the original answer in 2009. As of 2014, most major browsers now support outerHTML as a native property (see, for example, Firefox and Internet Explorer), so you can do:

$('#item-of-interest').prop('outerHTML');

Find element within HTML string

You are very close, wrap your variable in $()

var $div = $(html);
$div.find(".find-me").remove();

If you want to return to string can do something like:

var htmlString = $('<div>').append($div).html();

Get HTML String for jQuery and/or DOM object

try the dom property .outerHTML

HTML Elements missing when converting from a HTML string in jQuery?

Your jQuery is working correctly. myHiddenElements contains both tables as HTML elements. When you write myHiddenElements.html(), what you get is the HTML content of the first element in the selection. So that is the content of the first table in your HTML string.

You can get the innerHTML of both tables by writing something like:

myHiddenElements.find('table').each(function(){
    console.log($(this).html())
});

If you want to get the HTML string from the jQuery object again, you can use one of the methods outlined in this question: jQuery: outer html() . Or you could just use your original string.

If you want to do something else with the HTML, your myHiddenElements string already contains what you need. So things like this will work:

myHiddenElements.find('td').css('color', 'red');
$('#wrapperDiv').append(myHiddenElements);
// etc.

jQuery - selectors on a html string

First, use jQuery.parseHTML to parse the HTML into an array of elements; then you’ll be able to convert it to a jQuery collection and use filter to restrict the collection to elements matching a selector.

var html =    '<td class="test">asd</td>' +    '<td class="second">fgh</td>' +    '<td class="last">jkl</td>';
var text = $($.parseHTML(html)).filter('.test').text();
console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery.contents() get each element as HTML / STRING

If you are looking for html including the wrapping element then

$('#mydiv').contents().each(function () {
    //check if it is a text node
    if (this.nodeType == 3) {
        //if so get the node value for the element
        console.log(this.nodeValue)        
    } else {
        //if not use outerHTML or innerHTML based on need
        console.log(this.outerHTML);
    }
});

Demo: Fiddle

Extract Text and Specific Elements from a String Containing HTML

For the first requirement, just strip all the html from your string, you can do it using regex:

var stripedHtml = str.replace(/<[^>]+>/g, '');
console.log(stripedHtml) //Some text 

Here is a working example

For the second use case, just parse it as html element and you're ready to go.

var el = document.createElement( 'html' );
el.innerHTML = 'Some text ' + 
          '<input type="hidden" id="hiddenField" value="3" /> ' +
          '<input type="text" id="textField"/>';

el.getElementsByTagName( 'input' )

See here a working example for the second scenario.

How to get HTML string of dynamically changed element using jQuery?

You can use .attr() instead.

$(document).ready(function() {  var parent = $('#foo');  parent.find('#bar').attr('value', 'hi');  console.log(parent.prop('outerHTML'));
  $('#txt').text('hello');  console.log($('#par').find('#txt').prop('outerHTML'));});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="foo">  <input type='text' id="bar" value="" /></div>
<div id="par">  <textarea id='txt'></textarea></div>

jquery.html() returns only first text when loaded from string

When parsing HTML fragments containing a body element, browsers in general (and jQuery does this as well) will disregard everything except what's inside the body element. So what you have there ends up being equivalent to:

var content = $("<div>hello</div><div>world</div>");
alert("content.text() = " + content.text());
alert("content.html() = " + content.html());

You end up with a jQuery object with two elements in it: The div elements.

In jQuery, normally accessor functions (html, val, css, etc.) only use the first element in the set when you use them as getters, and that's what html is doing above. text is an unusual accessor function in jQuery: It gives you the combined text of all of the elements in the set, not just the first.

We can see this in the docs, but it's still surprising. From html:

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

From text:

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

(My emphasis in both cases.)

---

Related Topics