获取元素中的段落文本
Get paragraph text inside an element
我希望<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"];
}
如何做到这一点?
或者,您也可以将li元素本身传递给myfunction函数,如图所示:
function myfunction(ctrl) {
var TextInsideLi = ctrl.getElementsByTagName('p')[0].innerHTML;
}
在您的HTML中,<li onclick="myfunction(this)">
您使用jQuery吗?是一个不错的选择
text = $('p').text();
<!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
试试这个:
<li onclick="myfunction(this)">
function myfunction(li) {
var TextInsideLi = li.getElementsByTagName('p')[0].innerHTML;
}
实时演示
将html更改为以下内容:
<ul>
<li onclick="myfunction()">
<span></span>
<p id="myParagraph">This Text</p>
</li>
</ul>
然后你可以通过以下功能获得你的段落内容:
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;
}
使用jQuery:
$("li").find("p").html()
应该起作用。
如果你使用e.g."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>
将Id
属性添加到P
标记中,其值类似于文本或其他内容:
function gettext() {
var amount = document.getElementById('text').value;
}
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>
相关文章:
- Javascript-在文本区域中断,但不在段落中中断
- 可以't通过DOM更改javascript中的段落文本
- 无法使用jquery克隆没有文本的段落
- 使用XML将头文本、段落文本和按钮和每个图像绑定
- 获取元素中的段落文本
- 使用 JavaScript 将文本框的内容作为段落文本动态插入
- 为段落文本的一部分分配 ID
- 如何通过jquery正式段落文本
- 按钮应该在基于 JavaScript 代码单击时更改段落
文本,但它不会更改文本
- 在页面加载时使用javascript设置段落文本
- 将段落文本设置为 JSON 数据结果
- 如何在单击列表项时更改段落文本
- 单击图像时更改段落文本(Javascript)
- 根据下拉菜单中的选择来改变段落文本——Angular
- 仅在段落文本中隐藏字母
- chrome MutationObserver的新段落文本
- 使用来自多个输入的数据更改段落文本
- 如何在Javascript中更改段落文本?(使用单选按钮的值).(onclick事件可能没有触发)
- 获取指定段落内的段落文本
- Flexslider-如何使用单个方向Nav使两个滑块一起工作(图像和段落文本)