Получить текст абзаца внутри элемента

Я хочу иметь текстовое значение от <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"];
}

Как это сделать?

Ответы

Ответ 1

В качестве альтернативы вы также можете передать сам элемент li вашей функции myfunction, как показано ниже:

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

и в вашем HTML, <li onclick="myfunction(this)">

Ответ 2

Используете ли вы jQuery? Хорошим вариантом будет

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

Ответ 3

Попробуйте следующее:

<li onclick="myfunction(this)">

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

Живая демонстрация

Ответ 4

измените свой html на следующее:

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

вы можете получить содержимое своего абзаца со следующей функцией:

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

Ответ 5

Использовать jQuery:

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

должен работать.

Ответ 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

Если вы используете, например. "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>