web-dev-qa-db-ja.com

要素内の段落テキストを取得する

<p>要素内の<li>からのテキスト値が必要です。

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"];
}

これを行う方法？

javascripthtmlparagraph
33
user1544892

または、次のようにli要素自体をmyfunction関数に渡すこともできます。

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

そして、HTMLで、<li onclick="myfunction(this)">

41
jay c.

JQueryを使用していますか？良いオプションは

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

これを試して：

<li onclick="myfunction(this)">

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

ライブデモ

7
Engineer

htmlを次のように変更します。

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

次に、次の関数を使用して段落のコンテンツを取得できます。

function getContent() {
    return document.getElementById("myParagraph").innerHTML;
}
5
Tom
<!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>

ここでは、次を使用してh4のテキストコンテンツを取得できます。

document.getElementById('content').textContent
1
ankit keshari

JQueryを使用します。

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

動作するはずです。

1
Triton Man

あなたが使用する場合「id」では次のようにできます。

   (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>
1
Karol-X

[〜＃〜] 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;
}​
1
j08691