获取元素内的段落文本
Posted
技术标签:
【中文标题】获取元素内的段落文本【英文标题】：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>
function myfunction()
var TextInsideLi = [the result of this has to be the text inside the 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 选择器 - 只是更具体以上是关于获取元素内的段落文本的主要内容，如果未能解决你的问题，请参考以下文章
如何通过javascript获取textarea元素内的选定文本？