AJAX

How to extract text from from a tag?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2009

Posts: 13

Reputation: beanryu is an unknown quantity at this point

Solved Threads: 0

beanryu

Offline

Newbie Poster

How to extract text from from a tag?

Aug 8th, 2009

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:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div id="mydiv">
<p>first</p>
</div>

The tags are created by the following js code:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
paragraph = document.createElement("p");
text = document.createTextNode("first");
paragraph.appendChild(text);
document.getElementById('mydiv').appendChild(paragraph);
paragraph = document.createElement("p");
text = document.createTextNode("first");
paragraph.appendChild(text);
document.getElementById('mydiv').appendChild(paragraph);

I want to use javascript to extract the text from the first tag. In my code, I wrote:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var mydiv = document.getElementById('mydiv');
var p = mydiv.childNodes[0];
var text = p.childNodes[0]; // I tried others like p.text
alert(text.nodeValue);
var mydiv = document.getElementById('mydiv');
var p = mydiv.childNodes[0];
var text = p.childNodes[0]; // I tried others like p.text
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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: How to extract text from from a tag?

Aug 8th, 2009

Hi beanryu,

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Walk the DOM</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */
 
html, body {
   border : none;
   color : #405060;
   font : normal normal normal 90%/1.4 Verdana, Helvetica, Arial, sans-serif;
   height : auto;
   margin : 0;
   min-height : 206px;
   min-width : 176px;
   padding : 0;
   text-align : center;
   width : auto; }
 
body { background-color : #FFFFFF; }
h2.logo {
   border-top : 1px solid #000;
   border-bottom : 1px solid #000;
   letter-spacing : 2px;
   padding : .200em 1em .200em 1em;
   margin-bottom : 1.500em;
   background-color : #405060;
   color : #fff; }
 
div { 
   border : none;
   margin : 0;
   padding : 0; }
 
div#main {
   margin : 0 auto;
   background-color : transparent !important;
   height : 100%;
   width : 100%; }
 
div.pad {
   padding : 1.200em; }
 
div.bordered {
   min-height : 600px;
   border : 1px solid;
   padding : 1em;
   text-align : left; }
 
.no-top-margin { margin-top : 0; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
 
 
var dom = function() {
var mydiv = document.getElementsByTagName("div")[ "mydiv" ];
   if( "createElement" in document ) { // See if the document model supports the "createElement" method. 
      var paragraph = document.createElement( "p" ); // dynamic paragraph.
 
      var p = mydiv.getElementsByTagName( paragraph.nodeName ); 
/* 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 ). */
         paragraph.appendChild( document.createTextNode( "First Paragraph"));
 
      mydiv.insertBefore(  paragraph, p[ 0 ] ); 
/* instructing our main div to insert our created paragraph right before the second paragraph--which is preloaded on the document. */ 
   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. 
 
There are many different methods or different techniques, that you can apply to extract all the elements you need inside your documents'. */
 
   for( var x = 0; p[ x ]; x++ ) { // Here's a little demo of extracting only the text content of your paragraph collection.
      for( var y = 0; ( nodes = p[ x ].childNodes[ y ] ); y++ ) {
         if ( nodes.nodeType === 3 || nodes.nodeType === Node.TEXT_NODE ) {
            alert( nodes.nodeValue + "\n\n ~ looping the nodeList item." );
            continue;
            }
         }
      }
   }
};
 
window.onload = dom;
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="main">
<div class="pad">
<div class="bordered">
<h2 class="no-top-margin logo">JavaScript Live Demo!</h2>
<!-- 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 ). -->
<div id="mydiv">
 
<p id="Two">Second Paragraph</p>
<p id="Three">Third Paragraph</p>
</div>
 
</div> <!-- class :: bordered -->
</div> <!-- class :: pad -->
</div> <!-- id :: main -->
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Walk the DOM</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */

html, body {
   border : none;
   color : #405060;
   font : normal normal normal 90%/1.4 Verdana, Helvetica, Arial, sans-serif;
   height : auto;
   margin : 0;
   min-height : 206px;
   min-width : 176px;
   padding : 0;
   text-align : center;
   width : auto; }

body { background-color : #FFFFFF; }
h2.logo {
   border-top : 1px solid #000;
   border-bottom : 1px solid #000;
   letter-spacing : 2px;
   padding : .200em 1em .200em 1em;
   margin-bottom : 1.500em;
   background-color : #405060;
   color : #fff; }

div { 
   border : none;
   margin : 0;
   padding : 0; }

div#main {
   margin : 0 auto;
   background-color : transparent !important;
   height : 100%;
   width : 100%; }

div.pad {
   padding : 1.200em; }

div.bordered {
   min-height : 600px;
   border : 1px solid;
   padding : 1em;
   text-align : left; }

.no-top-margin { margin-top : 0; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[


var dom = function() {
var mydiv = document.getElementsByTagName("div")[ "mydiv" ];
   if( "createElement" in document ) { // See if the document model supports the "createElement" method. 
      var paragraph = document.createElement( "p" ); // dynamic paragraph.

      var p = mydiv.getElementsByTagName( paragraph.nodeName ); 
/* 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 ). */
         paragraph.appendChild( document.createTextNode( "First Paragraph"));

      mydiv.insertBefore(  paragraph, p[ 0 ] ); 
/* instructing our main div to insert our created paragraph right before the second paragraph--which is preloaded on the document. */ 
   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. 

There are many different methods or different techniques, that you can apply to extract all the elements you need inside your documents'. */

   for( var x = 0; p[ x ]; x++ ) { // Here's a little demo of extracting only the text content of your paragraph collection.
      for( var y = 0; ( nodes = p[ x ].childNodes[ y ] ); y++ ) {
         if ( nodes.nodeType === 3 || nodes.nodeType === Node.TEXT_NODE ) {
            alert( nodes.nodeValue + "\n\n ~ looping the nodeList item." );
            continue;
            }
         }
      }
   }
};

window.onload = dom;
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="main">
<div class="pad">
<div class="bordered">
<h2 class="no-top-margin logo">JavaScript Live Demo!</h2>
<!-- 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 ). -->
<div id="mydiv">

<p id="Two">Second Paragraph</p>
<p id="Three">Third Paragraph</p>
</div>

</div> <!-- class :: bordered -->
</div> <!-- class :: pad -->
</div> <!-- id :: main -->
</body>
</html>

-essential

•

Join Date: Aug 2009

Posts: 1

Reputation: quiraang is an unknown quantity at this point

Solved Threads: 1

quiraang

Offline

Newbie Poster

Re: How to extract text from from a tag?

Aug 8th, 2009

The following works:

Help with Code Tags

(Toggle Plain Text)

<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

Help with Code Tags

(Toggle Plain Text)

<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?

•

Join Date: Aug 2007

Posts: 165

Reputation: Fest3er is an unknown quantity at this point

Solved Threads: 18

Fest3er

Offline

Junior Poster

Re: How to extract text from from a tag?

Aug 8th, 2009

•

Originally Posted by beanryu

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div id="mydiv">
first
</div>
<div id="mydiv"> first </div>

Since you have the web page (web site), can't you:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div id="mydiv">
<p id="mydiv_p1">first</p>
</div>

In other words, have your code that creates the assign an ID to it. Fetching the .innerHTML of that will be trivial once it has an ID.

•

Join Date: Feb 2009

Posts: 13

Reputation: beanryu is an unknown quantity at this point

Solved Threads: 0

beanryu

Offline

Newbie Poster

Re: How to extract text from from a tag?

Aug 9th, 2009

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.

•

Join Date: Aug 2007

Posts: 165

Reputation: Fest3er is an unknown quantity at this point

Solved Threads: 18

Fest3er

Offline

Junior Poster

Re: How to extract text from from a tag?

Aug 9th, 2009

•

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.

•

Join Date: Apr 2009

Posts: 807

Reputation: Airshow is on a distinguished road

Solved Threads: 114

Airshow

Offline

Practically a Posting Shark

Re: How to extract text from from a tag?

Aug 9th, 2009

Beanryu,

You said in your original post:

•

Originally Posted by beanryu

The tags are created by the following js code:
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
paragraph = document.createElement("p");
text = document.createTextNode("first");
paragraph.appendChild(text);
document.getElementById('mydiv').appendChild(paragraph);
paragraph = document.createElement("p"); text = document.createTextNode("first"); paragraph.appendChild(text); 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.

50% of the solution lies in accurately describing the problem!

•

Join Date: Feb 2009

Posts: 13

Reputation: beanryu is an unknown quantity at this point

Solved Threads: 0

beanryu

Offline

Newbie Poster

Re: How to extract text from from a tag?

Aug 10th, 2009

hey thanks for the suggestion

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: How to extract text from from a tag?

Aug 13th, 2009

Help with Code Tags

(Toggle Plain Text)

<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.