获取元素内的段落文本答案

【问题标题】：Get paragraph text inside an element获取元素内的段落文本
【发布时间】：2012-07-22 22:52:38
【问题描述】：

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

如何做到这一点？

【问题讨论】：

标签： javascript html paragraph

【解决方案1】：

将Id 属性添加到P 标记中，其值类似于文本或其他内容：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您使用例如。 "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>

【讨论】：

【解决方案4】：

使用 jQuery：

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

应该可以。

【讨论】：

通过编写大量代码来重新发明轮子，这些代码将处理 DOM 在所有不同浏览器上的工作方式。
我假设页面上有不止一个<li>。

【解决方案5】：

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

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

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

【讨论】：

谢谢，比工程师的回答简单一点；）
优秀的答案！谢谢兄弟。

【解决方案6】：

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

【讨论】：

【解决方案7】：

将您的 html 更改为以下内容：

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

那么你可以通过以下函数获取你的段落内容：

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

【讨论】：

【解决方案8】：

试试这个：

<li onclick="myfunction(this)">

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

Live demo

【讨论】：

【解决方案9】：

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

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

【讨论】：

我假设页面上有不止一个<p>。
是的，这只是一个例子，为此使用任何 CSS 选择器 - 只是更具体