×

JS如何获取span元素的文本

作者:andy0012019.12.30来源:Web前端之家浏览:14194评论:0
关键词:js

方法1:使用HTML DOM textContent属性

HTML DOM textContent属性设置/返回已定义节点及其所有后代的文本内容。通过设置textContent属性,子节点将被删除,并将其替换为具有指定字符串的单个Text节点。

语法:

返回节点的文本内容

node.textContent

设置节点的文本内容

node.textContent = text

属性值:包含单值text,指定指定节点的文本内容。

返回值:返回一个字符串,表示节点及其所有后代的文本。如果元素是文档,文档类型或表示法,则返回null。

示例:使用textContent属性获取内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body style="text-align:center;" id="body">
		<h2>HTML DOM textContent属性</h2>
		<span id="Span" style="font-size: 15px; font-weight: bold;">这是span元素的文本。</span>
		<br><br>
		<button onclick="Run()">单击这里 </button>

		<p id="DOWN" style="color:red; font-size: 20px; font-weight: bold;">
		</p>

		<script>
			var span = document.getElementById("Span");
			var el_down = document.getElementById("DOWN");

			function Run() {
				el_down.innerHTML = span.textContent;
			}
		</script>
	</body>

</html>

方法2:使用HTML DOM innerText属性

HTML DOM innerText属性设置/返回已定义节点及其所有后代的文本内容。通过设置innerText属性,将删除所有子节点,并将其替换为具有指定字符串的单个Text节点。

语法:

返回节点的文本内容

node.innerText

设置节点的文本内容

node.innerText=text

属性值:包含单值text,指定指定节点的文本内容

返回值:返回一个字符串,表示节点及其所有子节点的“rendered”文本内容。

示例:使用innerText属性获取内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body style="text-align:center;" id="body">
		<h2>HTML DOM textContent属性</h2>
		<span id="Span" style="font-size: 15px; font-weight: bold;">这是span元素的文本。</span>
		<br><br>
		<button onclick="Run()">单击这里 </button>

		<p id="DOWN" style="color:palevioletred; font-size: 20px; font-weight: bold;">
		</p>

		<script>
			var span = document.getElementById("Span"); 
            var el_down = document.getElementById("DOWN"); 
              
            function Run() { 
                el_down.innerHTML = span.innerText; 
            } 
		</script>
	</body>

</html>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js82jfdgjdgkldfjkljklj.html

网友评论文明上网理性发言 已有0人参与

发表评论: