943,907 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > How to extract text from from a <p> tag?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 8th, 2009
0

How to extract text from from a <p> tag?

Expand Post »
I know, this is really a noob question and I don't really know what went wrong.
The code is very simple. I have a web page that contains the following:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="mydiv">
  2. <p>first</p>
  3. </div>

The <p> tags are created by the following js code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. paragraph = document.createElement("p");
  2. text = document.createTextNode("first");
  3. paragraph.appendChild(text);
  4. document.getElementById('mydiv').appendChild(paragraph);

I want to use javascript to extract the text from the first <p> tag. In my code, I wrote:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var mydiv = document.getElementById('mydiv');
  2. var p = mydiv.childNodes[0];
  3. var text = p.childNodes[0]; // I tried others like p.text
  4. alert(text.nodeValue);
I tried many other ways to get the text, but I just can't get it. Everytime I get null or blank or Object Text or no pop up at all. I am pretty sure document.getElementById('mydiv') is getting the right div. Can someone please give me an example, please, I feel so stupid because this shouldn't be a problem but I just can't really find a solution. Thank you so much!
Last edited by beanryu; Aug 8th, 2009 at 1:29 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
beanryu is offline Offline
13 posts
since Feb 2009
Permalink
Aug 8th, 2009
1

Re: How to extract text from from a <p> tag?

Hi beanryu,

i prepared some document sample for you, which you can used as referenced when you are mapping elements inside your document.

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  7. <head>
  8. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Walk the DOM</title>
  13. <style id="css21" type="text/css" media="all">
  14. /* <![CDATA[ */
  15.  
  16. html, body {
  17.    border : none;
  18.    color : #405060;
  19.    font : normal normal normal 90%/1.4 Verdana, Helvetica, Arial, sans-serif;
  20.    height : auto;
  21.    margin : 0;
  22.    min-height : 206px;
  23.    min-width : 176px;
  24.    padding : 0;
  25.    text-align : center;
  26.    width : auto; }
  27.  
  28. body { background-color : #FFFFFF; }
  29. h2.logo {
  30.    border-top : 1px solid #000;
  31.    border-bottom : 1px solid #000;
  32.    letter-spacing : 2px;
  33.    padding : .200em 1em .200em 1em;
  34.    margin-bottom : 1.500em;
  35.    background-color : #405060;
  36.    color : #fff; }
  37.  
  38. div { 
  39.    border : none;
  40.    margin : 0;
  41.    padding : 0; }
  42.  
  43. div#main {
  44.    margin : 0 auto;
  45.    background-color : transparent !important;
  46.    height : 100%;
  47.    width : 100%; }
  48.  
  49. div.pad {
  50.    padding : 1.200em; }
  51.  
  52. div.bordered {
  53.    min-height : 600px;
  54.    border : 1px solid;
  55.    padding : 1em;
  56.    text-align : left; }
  57.  
  58. .no-top-margin { margin-top : 0; }
  59. /* ]]> */
  60. </style>
  61. <script type="text/javascript">
  62. // <![CDATA[
  63.  
  64.  
  65. var dom = function() {
  66. var mydiv = document.getElementsByTagName("div")[ "mydiv" ];
  67.    if( "createElement" in document ) { // See if the document model supports the "createElement" method. 
  68.       var paragraph = document.createElement( "p" ); // dynamic paragraph.
  69.  
  70.       var p = mydiv.getElementsByTagName( paragraph.nodeName ); 
  71. /* our paragraph collections referenced by an index position ( when the dynamic paragraph is appended inside mydiv, then indexPos : 0 - will become the dynamic paragraph, 1 - is the second, and 2 - for the third and last paragraph inside mydiv ). */
  72.          paragraph.appendChild( document.createTextNode( "First Paragraph"));
  73.  
  74.       mydiv.insertBefore(  paragraph, p[ 0 ] ); 
  75. /* instructing our main div to insert our created paragraph right before the second paragraph--which is preloaded on the document. */ 
  76.    alert( p[ 0 ].innerText + "\n\n ~ using the innerText method" ); /* The simplest way of getting the text-node inside any of the target paragraph is to use the "innerText" method. 
  77.  
  78. There are many different methods or different techniques, that you can apply to extract all the elements you need inside your documents'. */
  79.  
  80.    for( var x = 0; p[ x ]; x++ ) { // Here's a little demo of extracting only the text content of your paragraph collection.
  81.       for( var y = 0; ( nodes = p[ x ].childNodes[ y ] ); y++ ) {
  82.          if ( nodes.nodeType === 3 || nodes.nodeType === Node.TEXT_NODE ) {
  83.             alert( nodes.nodeValue + "\n\n ~ looping the nodeList item." );
  84.             continue;
  85.             }
  86.          }
  87.       }
  88.    }
  89. };
  90.  
  91. window.onload = dom;
  92. // ]]>
  93. </script>
  94. </head>
  95. <body id="xhtml-10-transitional">
  96. <div id="main">
  97. <div class="pad">
  98. <div class="bordered">
  99. <h2 class="no-top-margin logo">JavaScript Live Demo!</h2>
  100. <!-- The only thing that is missing here, is our 1st paragraph. Which we will be needing to append inside the div( mydiv ) using our created function ( dom ). -->
  101. <div id="mydiv">
  102.  
  103. <p id="Two">Second Paragraph</p>
  104. <p id="Three">Third Paragraph</p>
  105. </div>
  106.  
  107. </div> <!-- class :: bordered -->
  108. </div> <!-- class :: pad -->
  109. </div> <!-- id :: main -->
  110. </body>
  111. </html>

-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 8th, 2009
1

Re: How to extract text from from a <p> tag?

The following works:

<script type="text/javascript">
paragraph = document.createElement("p");
text = document.createTextNode("first");
paragraph.appendChild(text);
document.getElementById('mydiv').appendChild(paragraph);
text= document.getElementById('mydiv').innerHTML;
alert(text);
</script>

but only if it follows after
<div id="mydiv">
</div>
because if you run the code before the div is created the script won't find it. So, where are you running the script?
Reputation Points: 11
Solved Threads: 1
Newbie Poster
quiraang is offline Offline
1 posts
since Aug 2009
Permalink
Aug 8th, 2009
1

Re: How to extract text from from a <p> tag?

Click to Expand / Collapse  Quote originally posted by beanryu ...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="mydiv">
  2. <p>first</p>
  3. </div>
Since you have the web page (web site), can't you:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="mydiv">
  2. <p id="mydiv_p1">first</p>
  3. </div>

In other words, have your code that creates the <p> assign an ID to it. Fetching the .innerHTML of that <p> will be trivial once it has an ID.
Reputation Points: 51
Solved Threads: 35
Posting Whiz in Training
Fest3er is offline Offline
238 posts
since Aug 2007
Permalink
Aug 9th, 2009
0

Re: How to extract text from from a <p> tag?

THank YOU ALL so much for the help, especially to essential for the sample code. I found out that the problem was actually google chrome, everything works fine on IE, but nothing works on Chrome, innerText or nodeValue. When I click on google chrome's about thing, it saids it's up to date. Anyone having this problem on chrome? Again Thanks alot.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
beanryu is offline Offline
13 posts
since Feb 2009
Permalink
Aug 9th, 2009
1

Re: How to extract text from from a <p> tag?

Click to Expand / Collapse  Quote originally posted by beanryu ...
THank YOU ALL so much for the help, especially to essential for the sample code. I found out that the problem was actually google chrome, everything works fine on IE, but nothing works on Chrome, innerText or nodeValue. When I click on google chrome's about thing, it saids it's up to date. Anyone having this problem on chrome? Again Thanks alot.
I would sooner believe you are using a non-standard 'feature' of IE. Try Firefox, Opera and a few other browsers; ask others to try it on Safari and Konqueror. If it still only works in IE, then you are using a feature found only in IE and your application is not cross-browser capable.
Reputation Points: 51
Solved Threads: 35
Posting Whiz in Training
Fest3er is offline Offline
238 posts
since Aug 2007
Permalink
Aug 9th, 2009
1

Re: How to extract text from from a <p> tag?

Beanryu,

You said in your original post:
Click to Expand / Collapse  Quote originally posted by beanryu ...
The <p> tags are created by the following js code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. paragraph = document.createElement("p");
  2. text = document.createTextNode("first");
  3. paragraph.appendChild(text);
  4. document.getElementById('mydiv').appendChild(paragraph);
Therefore, you should have the means for javascript to remember the contents of these paragraphs without needing to retreive them from the DOM.

Create a javascript array var paraContents = []; , then every time you create/populate a para, paraContents['mydiv_n'](txt); .

Now instead of document.getElementById(....) you can just do txt = paraContents['mydiv_n'] .

It's horribly inefficient because there are two copies of each set of para text, but it's paractical if you can't get Chrome to play ball with getElementById. Depending on exactly what problem Chrome is having, you may be able to get away with storing references to the paras, rather than their contents. This will be much more efficient.

Airshow
Last edited by Airshow; Aug 9th, 2009 at 10:47 pm.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,526 posts
since Apr 2009
Permalink
Aug 10th, 2009
0

Re: How to extract text from from a <p> tag?

hey thanks for the suggestion
Reputation Points: 10
Solved Threads: 0
Newbie Poster
beanryu is offline Offline
13 posts
since Feb 2009
Permalink
Aug 13th, 2009
0

Re: How to extract text from from a <p> tag?

<script type="text/javascript">
paragraph = document.createElement("p");
text = document.createTextNode("first");
paragraph.appendChild(text);
document.getElementById('mydiv').appendChild(paragraph);
alert(text.nodeValue);
</script>
Last edited by Troy III; Aug 13th, 2009 at 9:20 am.
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
511 posts
since Jun 2008
Permalink
Jun 22nd, 2010
0
Re: How to extract text from from a <p> tag?
Hello i am developing an application using ajax. I have a page having some hyperlinks, i want that when ever some one move the cursor to the link, mini preview of the target page should be generated. I have done that but i want only istparagraph of the target page, not the whole html.
Any Help ?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
majid091 is offline Offline
3 posts
since Jun 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
This thread is currently closed and is not accepting any new replies.
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Passing Multiple vaules in ajax post
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Urgent help





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC