How to extract text from from a tag?

Question

beanryu 0 Newbie Poster

15 Years Ago

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:

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

The tags are created by the following js code:

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:

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!

javascript

9 Contributors
11 Replies
5K Views
10 Months Discussion Span
Latest Post 14 Years Ago Latest Post by Ezzaral

essential 84 Posting Shark

15 Years Ago

Hi beanryu,

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

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

quiraang 0 Newbie Poster

15 Years Ago

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?

Fest3er 39 Posting Whiz in Training

15 Years Ago

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

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

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

beanryu 0 Newbie Poster · Answer 1 · 2009-08-09T11:41:33+00:00

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.

Fest3er 39 Posting Whiz in Training · Answer 2 · 2009-08-09T23:07:40+00:00

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-08-10T07:35:32+00:00

Beanryu,

You said in your original post:

The tags are created by the following js code:

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

beanryu 0 Newbie Poster · Answer 4 · 2009-08-10T18:03:23+00:00

beanryu 0 Newbie Poster

15 Years Ago

hey thanks for the suggestion

Troy III 272 Posting Pro · Answer 5 · 2009-08-13T18:19:54+00:00

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

majid091 0 Newbie Poster · Answer 6 · 2010-06-23T01:48:51+00:00

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 ?

fxm 23 Posting Pro · Answer 7 · 2010-06-23T01:53:03+00:00

You have already started a new thread on your issue.
Was it really necessary to resurrect this two-year old thread as well?

Ezzaral 2,714 Posting Sage Team Colleague Featured Poster · Answer 8 · 2010-06-23T03:29:00+00:00

Ezzaral 2,714 Posting Sage

14 Years Ago

Agreed. Thread closed.

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