Get paragraph text inside an element

Question

I want to have the text value from a <p> inside a <li> element.

html:

<ul>
  <li onclick="myfunction()">
    <span></span>
    <p>This Text</p>
  </li>
</ul>

javascript:

function myfunction() {
  var TextInsideLi = [the result of this has to be the text inside the paragraph"];
}

How to do this?

score 55 · Accepted Answer · answered Jul 24 '12 at 15:27

55

Alternatively, you can also pass the li element itself to your myfunction function as shown:

function myfunction(ctrl) {
  var TextInsideLi = ctrl.getElementsByTagName('p')[0].innerHTML;
}

and in your HTML, <li onclick="myfunction(this)">

answered Jul 24 '12 at 15:27

jay c.

1,521
10
9

1

Thanks, a a little bit simpler then the answer by Engineer ;) – Jul 24 '12 at 15:30

score 16 · Answer 2 · answered Jul 24 '12 at 15:17

16

Do you use jQuery? A good option would be

text = $('p').text();

answered Jul 24 '12 at 15:17

casraf

21,085
9
56
91

2

I'm assuming there is more than one `
` on the page.
– gen_Eric Jul 24 '12 at 15:23
1

Yeah it was just an example, use any CSS selector for this - just be more specific – casraf Jul 25 '12 at 19:12

score 13 · Answer 3 · edited May 12 '18 at 13:06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Where to JavaScript</title>
    <!-- JavaScript in head tag-->
    <script>
        function changeHtmlContent() {
            var content = document.getElementById('content').textContent;
            alert(content);
        }
    </script>
</head>
<body>
    <h4 id="content">Welcome to JavaScript!</h4>
    <button onclick="changeHtmlContent()">Change the content</button>
</body>

Here, we can get the text content of h4 by using:

document.getElementById('content').textContent

score 7 · Answer 4 · answered Jul 24 '12 at 15:18

7

Try this:

<li onclick="myfunction(this)">

function myfunction(li) {
    var TextInsideLi = li.getElementsByTagName('p')[0].innerHTML;
}

Live demo

answered Jul 24 '12 at 15:18

Engineer

47,849
12
88
91

score 6 · Answer 5 · answered Jul 24 '12 at 15:21

change your html to the following:

<ul>
    <li onclick="myfunction()">
        <span></span>
        <p id="myParagraph">This Text</p>
    </li>
</ul>

then you can get the content of your paragraph with the following function:

function getContent() {
    return document.getElementById("myParagraph").innerHTML;
}

score 1 · Answer 6 · edited Nov 08 '15 at 19:13

1

Use jQuery:

$("li").find("p").html()

should work.

edited Nov 08 '15 at 19:13

Stefan van den Akker

6,661
7
48
63

answered Jul 24 '12 at 15:17

Rocky Pulley

22,531
20
68
106

1

re-invent the wheel by writing a ton of code which will handle the way the DOM works on all different browers. – Rocky Pulley Jul 24 '12 at 15:20
I'm assuming there is more than one `
` on the page.

gen_Eric

Jul 24 '12 at 15:23

score 1 · Answer 7 · answered Jul 24 '12 at 15:24

1

HTML:

<ul>
  <li onclick="myfunction(this)">
    <span></span>
    <p>This Text</p>
  </li>
</ul>

JavaScript:

function myfunction(foo) {
    var elem = foo.getElementsByTagName('p');
    var TextInsideLi = elem[0].innerHTML;
}

answered Jul 24 '12 at 15:24

j08691

204,283
31
260
272

score 1 · Answer 8 · answered Jun 29 '17 at 19:28

If you use eg. "id" you can do it this way:

   (function() {
    let x = document.getElementById("idName");
    let y = document.getElementById("liName");
    
    y.addEventListener('click', function(e) {
        y.appendChild(x);
    });

  
})();

<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <p id="idName">TEXT</p>
    <ul>
        <li id="liName">

        </li>
    </ul>
</body>
<script src="js/scripts/script.js"></script>

</html>

score 0 · Answer 9 · edited Nov 02 '20 at 15:59

0

Add an Id property into the P tag with value like text or something:

function gettext() {
    var amount = document.getElementById('text').value;
}

edited Nov 02 '20 at 15:59

Elletlar

3,136
7
32
38

answered Nov 02 '20 at 14:45

pepa filip

1

score 0 · Answer 10 · answered Aug 01 '23 at 11:51

0

const copyLink = () => {
   console.log('btn click');
   let linkURL = document.getElementById('clipboard').innerText;

}

In p tag:

<p id="clipboard" class="px-1 sm:px-8 py-4 ">
    {`https://offerstreet.in/coupons/coupon/?asin=${asin}`} 
</p>

answered Aug 01 '23 at 11:51

Bilal Ahmad

781
8
10

Get paragraph text inside an element

10 Answers10

Linked

Related