获取元素内的段落文本

时间:2012-07-24 15:14:49

标签: javascript html paragraph

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

怎么做?

9 个答案:

答案 0 :(得分:41)

或者,您也可以将li元素本身传递给myfunction函数,如下所示:

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

并在您的HTML中<li onclick="myfunction(this)">

答案 1 :(得分:11)

你使用jQuery吗?

是一个很好的选择
text = $('p').text();

答案 2 :(得分:7)

试试这个:

<li onclick="myfunction(this)">

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

Live demo

答案 3 :(得分:5)

将您的HTML更改为以下内容:

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

然后您可以使用以下函数获取段落的内容:

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

答案 4 :(得分:1)

使用jQuery:

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

应该有用。

答案 5 :(得分: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;
}​

答案 6 :(得分:1)

如果您使用例如。 &#34; ID&#34;你可以这样做:

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

  
})();
&#13;
<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>
&#13;
&#13;
&#13;

答案 7 :(得分:1)

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

答案 8 :(得分:0)

Id属性添加到P标记中,其值应类似于文本或类似内容:

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