5

I have a variable var 'html', it contains some html codes .in it there is a div with id messages. I want to get only that div contents from the 'html' variable into another variable using javascript.
Please help . .

Francis Mv
  • 83
  • 1
  • 5

5 Answers5

3

If it's valid HTML, you don't even have to append it to the DOM:

var html = "<div id='wrapper'><div id='messages'>Messages!</div></div>";

// Create DOM node (subtree) from the string (but don't append to the document):
var node = $(html);

// Find the messages div:
var messages = node.children('#messages');

// Get the contents of the div:
var result = messages.text();

Edit: here's a working example: http://jsfiddle.net/xndKN/1/

Peter-Paul van Gemerden
  • 6,921
  • 30
  • 37
3

The easiest way with jQuery in my opinion:

var message = $('<div />').append(html).find('#message').text();
                                                      //.html();
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
0
// your html code
var html = '...'; 

// add a temporary div
$('<div id="temp" style="display:none">'+html+'</div>').appendTo('body');

// extract the data inside the 'message' div
var message = $('#temp #message').text();

// remove temporary div
$('#temp').remove();

Now, the variable message will contain the text inside the div with id 'message'

techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

First of all you question is not giving enough information about your situation. You have not posted the code. Anyway if you try the following you will get access the the message div.

var o = $("<html><body><div id='parent'><div id='message'>Hello</div></div></body></html>")
$(o).children("#message").text()

I have tried it on Chrome Developer tool and it is working.

Amit Rai Sharma
  • 4,015
  • 1
  • 28
  • 35
  • There's no need to re-wrap `o` -- you used the `jQuery()` function (or `$()`) to create it, so it's already wrapped in a jQuery object. – Peter-Paul van Gemerden Dec 22 '11 at 11:41
  • @PPvg the code mentioned above is just for reference purpose. You are free to use whatever way you like to achieve the same output – Amit Rai Sharma Dec 22 '11 at 11:56
  • If I offended you: my apologies. I was merely trying to elucidate the use of the jQuery method. This mystical, magical "`$()`" function is not always clear to newcomers to jQuery. While passing a jQuery object to the jQuery function is in no way harmful (jQuery will just return the object unaltered), it's always useful to know what you're doing and why you're doing it the way you are. – Peter-Paul van Gemerden Dec 22 '11 at 12:11
  • (In fact: if it *were* harmful or even just bad practice, I would have edited your answer.) – Peter-Paul van Gemerden Dec 22 '11 at 12:13
  • @PPvG: *jQuery will just return the object unaltered*: Depends on what you mean. It will contain the same elements, but it creates a new jQuery object. `o === $(o)` is `false`. – Felix Kling Dec 22 '11 at 12:16
  • @PPvG.. No buddy you have not offended me. You were right to point out the use of jQuery(). I apologies for being bit rude while responding to your comment.. – Amit Rai Sharma Dec 22 '11 at 12:18
  • @FelixKling: you're right. I'd just assumed it would leave it untouched. I turns out a new jQuery collection is created and the `prevObject` property is lost. If you use chaining on jQuery objects, you can use `prevObject` to traverse back over the chain. Here's a little experiment: http://jsfiddle.net/aJedH/. I learn something every day. :-) – Peter-Paul van Gemerden Dec 22 '11 at 12:33
0

try

var myhtml = "here is my data outside div
              <div id='message'>inside div with id message</div>";
var node = $(myhtml);
$(node).append(myhtml);

alert($(node).find('div#message').text());

WORKING DEMO

xkeshav
  • 53,360
  • 44
  • 177
  • 245
  • There's no need to append the node to the document; you can traverse DOM nodes even if they're detached from the DOM tree. – Peter-Paul van Gemerden Dec 22 '11 at 11:37
  • It seems a bit odd to me to append the HTML code to itself. If you think the HTML string is not valid HTML, then I suggest to create an empty div and append the string there: `$('
    ').append(myhtml).find('#message')`. This will always work.     – Felix Kling Dec 22 '11 at 12:08