在一个JSP页面中使用javascript获得<span>标签里的内容

在一个JSP页面中使用javascript获得<span>标签里的内容,第1张

alert(datainnerHTML);

input 标签有value属性,值是输入框里的内容

span 标签没有value属性,span内部的内容,用innerHTML属性获得

第一种方法:输出html

1、<body onload="s()">

2、<span id="hello"></span>

3、<script language="javascript">

4、function s()

5、{documentgetElementById("hello")innerHTML = "<iframe src= height=400 width=300></iframe>";}

 6、</script>

第二种方法:输出文本

1、<body onload="s()">

2、<span id="hello"></span>

3、<script language="javascript">

4、function s()

5、{documentgetElementById("hello")innerText = "hello world";}

6、</script>

在页面加载完成后通过jquery给多个span赋值

扩展资料

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

参考资料:

百度百科-javascript

这里以jquery为例

思路:

当点击按钮的时候,获取当前按钮所被包含的元素,再查找这个元素里面对应的span节点

1、html代码

<div>

js如何获取当前<span>对象</span>的下一个span节点,代码在下面。

<input type="button" id="btn" value="获取span节点" />

</div>

2、js代码

<script>

$("#btn")click(function(){

    var spanhtml=$(this)parent()find("span")html();//查找当前按钮的父元素,根据父元素查找包含的span节点

    alert(spanhtml);//d出获取的内容

});

</script>

运行,将获取span的内容“对象”二字。

因为问题中是要获取当前对象下的节点,所以代码中将input放在div里面。

<!doctype html>

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<li>

<div class="vt-el-inner">

<div class="inner-logo">

<img src="/PPIMG/001jpg">

</div>

<div class="inner-title"><span>1</span>马格全屋定制</div>

<div class="inner-btn">

<div class="vote-count fl">7899票</div>

<button class="vote-send fr" onclick="asd(this)">投TA一票</button>

</div>

</div>

</li>

<li>

<div class="vt-el-inner">

<div class="inner-logo">

<img src="/PPIMG/002jpg">

</div>

<div class="inner-title"><span>2</span>马格全屋定制</div>

<div class="inner-btn">

<div class="vote-count fl">789票</div>

<button class="vote-send fr" onclick="asd(this)">投ta一票</button>

</div>

</div>

</li>

<script type="text/javascript" src="jquery-321js"></script>

<script type="text/javascript">

function asd(obj){

var ret = $(obj)parent()siblings("inner-title")find("span")html();

consolelog(ret)

}

</script>

</body>

</html>

需要引入jquery

思路:根据标签名称获取所有span对象,然后根据类名筛选出目标对象,最后使用 innerHTML 属性获取文本。实例演示如下:

1、HTML结构

<span class="xing">姓氏</span>

<span class="name">名字</span>

<span class="sheng">籍贯</span> <br>

<input type='button' value='获取class=name的span' onClick="fun()"/>

2、javascript代码

function fun(){

obj = documentgetElementsByTagName("span");

class_name = "name";

for(i in obj){

if(obj[i]className == class_name){

alert(obj[i]innerHTML);

return

}

}

}

3、效果演示

1、给span一个id,或者给一个特定的class使用jquery的id选择器或者类选择器

<span id="spId" class="content">ajlwe</span>var str=$("#spId")html();--通过id获取span,然后通过html()获取span里的内容

var str2=$("#spId")text();--通过id获取span,然后通过text()获取span里的内容

var str3=$("content")html();--通过class获取span,然后通过html()获取span里的内容

var str4=$("content")text();--通过class获取span,然后通过text()获取span里的内容

注:html()返回或设置被选元素的内容 (inner HTML);text()获取设置或返回被选元素的文本内容

有的时候无法取得值时,是因为html是从上往下解析的,在解析到js里的$("#spId")时,下面这个span还不存在,当然就取不到了。

js代码放在<span>下面解析时,span就有了。另外,jQuery的做法是用ready函数包含这些js代码,这样的话,就不存在位置的问题了,放到哪都可以。它的作用就是在加载完整个页面后才执行包含的js

使用windowgetSelection()getRangeAt(0)toString();

注意window对象,iframe中的选中使用相应的window对象

定位光标的话,有些可以使用focus函数。对于不可编辑的区域要使用Range对象。

然后windowgetSelection()removeAllRanges();//去除现有的光标(选中区域)

windowgetSelection()addRange(Range对象);//添加选中区域选中的范围

以上就是关于在一个JSP页面中使用javascript获得<span>标签里的内容全部的内容,包括:在一个JSP页面中使用javascript获得<span>标签里的内容、在js中, 怎么往span标签里放值进去、js如何获取当前对象的下一个span节点,代码如下等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9502329.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存