javascript - variable - Obtener texto de párrafo dentro de un elemento
outerhtml (8)
Quiero tener el valor de texto de un <p> dentro de un elemento <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"];
}
¿Como hacer esto?
¿Usas jQuery? Una buena opción sería
text = $(''p'').text();
Alternativamente, también puede pasar el elemento li a su función de función como se muestra:
function myfunction(ctrl) {
var TextInsideLi = ctrl.getElementsByTagName(''p'')[0].innerHTML;
}
y en su HTML, <li onclick="myfunction(this)">
Prueba esto:
<li onclick="myfunction(this)">
function myfunction(li) {
var TextInsideLi = li.getElementsByTagName(''p'')[0].innerHTML;
}
Si usas por ejemplo. "id" puedes hacerlo de esta manera:
(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>
Usa jQuery:
$("li").find("p").html()
Deberia trabajar.
cambia tu html a lo siguiente:
<ul>
<li onclick="myfunction()">
<span></span>
<p id="myParagraph">This Text</p>
</li>
</ul>
Luego puede obtener el contenido de su párrafo con la siguiente función:
function getContent() {
return document.getElementById("myParagraph").innerHTML;
}
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;
}
<!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>
Aquí, podemos obtener el contenido de texto de h4 usando:
document.getElementById(''content'').textContent