logo标签列表

获取元素中的段落文本

javascripthtmlparagraph
44
我想要在一个 <li> 元素内获取一个 <p> 的文本值。 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"];
}

如何做到这一点？

10个回答
56

另外，您还可以像下面所示那样将li元素本身传递给myfunction函数：

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

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

1
谢谢，比工程师的答案简单一点点 ;) - user1544892
16

你使用jQuery吗？一个不错的选择是：

text = $('p').text();
3
我假设页面上不止一个<p>。 - gen_Eric
1
是的，那只是一个例子，你可以使用任何CSS选择器 - 只需要更具体一些。 - casraf
14
<!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
这个答案值得成为正确答案。如此简单优雅，而且不依赖于解析 p 标签。 - undefined
8

试试这个：

<li onclick="myfunction(this)">

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

实时演示

6
请将您的HTML更改为以下内容：
<ul>
    <li onclick="myfunction()">
        <span></span>
        <p id="myParagraph">This Text</p>
    </li>
</ul>

接下来，您可以使用以下函数获取段落内容：

function getContent() {
    return document.getElementById("myParagraph").innerHTML;
}
1
使用jQuery：
$("li").find("p").html()

应该可以工作。

1
通过编写大量代码来处理DOM在所有不同浏览器上的工作方式，重新发明轮子。 - Rocky Pulley
我假设页面上有不止一个<li>。 - gen_Eric
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;
}​
1
如果您使用“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>

0
在 P 标签中添加一个类似文本或其他值的 Id 属性：
function gettext() {
    var amount = document.getElementById('text').value;
}
0
const copyLink = () => {
   console.log('btn click');
   let linkURL = document.getElementById('clipboard').innerText;

}

在 p 标签中：

<p id="clipboard" class="px-1 sm:px-8 py-4 ">
    {`https://offerstreet.in/coupons/coupon/?asin=${asin}`} 
</p>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接