JavaScript&jQuery.获取修改元素文本

最新推荐文章于 2022-05-10 16:51:33 发布
最新推荐文章于 2022-05-10 16:51:33 发布
阅读量358 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/H97042/p/9273808.html
版权

获取修改元素文本

 

使用nodrValue获取和修改

noderValue属性可以读节点文字

<!DOCTYPE html>
<html>
<head>
<title>使用nodeValue获取和修改</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color;#fff;
background-color: #99ff66；
}
.steam}{
color: #ff0033;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li id="c">米饺</li>
<li id="d"><a id="yufen">鱼粉</a></li>
</ul>
<script>
var tempel = document.getElementById("a");
var value = tempel.firstChild.nodeValue;
alert("" + value);
tempel.firstChild.nodeValue = "三鲜粉";

var tempel = document.getElementById("c");
var value = tempel.firstChild.nodeValue;
alert("" + value);
tempel.firstChild.nodeValue = "米粉";
</script>
</body>
</html>

使用textContent获取和修改

textContent属性可以获取更新包含元素

 

<!DOCTYPE html>
<html>
<head>
<title>使用textContent获取和修改</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color;#fff;
background-color: #99ff66；
}
.steam}{
color: #ff0033;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b"><em>在家吃</em>包子</li>
<li id="c">米饺</li>
<li id="d"><a id="yufen">鱼粉</a></li>
</ul>
<script>
var tempel = document.getElementById("a");
var value = tempel.textContent;
alert("获取到的值是" + value);
tempel.firstChild.textContent = "三鲜粉";

var tempel = document.getElementById("c");
var value = tempel.textContent;
alert("获取到的值是" + value);
tempel.firstChild.textContent = "米粉";
</script>
</body>
</html>

使用inner HTML获取和更新

innerHTML不仅包含文本，还包含子元素标签

 

<!DOCTYPE html>
<html>
<head>
<title>使用innerHTML获取和更新</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color;#fff;
background-color: #99ff66；
}
.steam}{
color: #ff0033;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b"><em>在家吃</em>包子</li>
<li id="c">米饺</li>
<li id="d"><a id="yufen">鱼粉</a></li>
</ul>
<script>
var tempel = document.getElementById("a");
var value = tempel.innerHTML;
alert("获取到的值是" + value);
tempel.innerHTML="我们去小区门口吃<span style'color:red'>三鲜粉</span>";

var tempel = document.getElementById("c");
var value = tempel.innerHTML;
alert("获取到的值是" + value);
tempel.innerHTML="我们去学校门口吃<span style'color:red'>米粉</span>";
</script>
</body>
</html>

获取修改value

有些元素有value属性，如input.botton.select等，使用value属性可以修改它的值

 

<!DOCTYPE html>
<html>
<head>
<title>获取修改value</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" name="hello" value="Hello world" id="hello">
<script>
var el=document.getElementById("hello");
alert( el.value);
el.value="你好"

</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/H97042/p/9273808.html

weixin_34192816
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QQ表情插件jquery.qqFace.js
06-01
1. **DOM操作**：jQuery提供了强大的DOM操作API，使得插件可以轻松地找到并操作页面上的输入框元素，如添加事件监听器、获取或设置元素的值。 2. **事件处理**：`jquery.qqFace.js`通过监听用户的键盘和鼠标事件，...
jquery.editable:jQuery插件，允许您编辑文本并获取旧值和新值
05-25
`jQuery Editable` 是一个功能强大的JavaScript插件，它为网页中的文本元素提供了可编辑的功能。用户可以直接在页面上修改文本内容，并且能够捕获旧值（原始数据）与新值（修改后的数据），这对于实现动态交互的Web...
jQuery.获取修改元素属性
weixin_33701251的博客
07-21 107
获取元素修改属性 attract（)方法，可以获取修改元素。 获取属性，使用: attract（"属性名") 相当于javaScript中的getAttribute()。 设置属性，使用：attr("属性名","属性值") 相当于JavaScript中的setAttribute()。 删除属性，使用：removeAttr("属性名") 相当于JavaScript中的remov...
【js】jQuery获取和修改元素的内容、属性、css样式
冰冷的希望的博客
08-12 3053
1.获取和修改元素内容 我们可以使用html()方法获取元素内容和修改内容，类似于元素js的innerHTMl 当html()方法不传参数的时候即是获取该元素的内容，若传参数，参数即该元素被修改后的内容 <body> <div id="div1"> <ul class="list"> <li>111</li> <li class="li1">222</li&g
总结的一些jquery获取更改dom元素常用方法
ynztpwl的专栏
04-21 1736
总结的一些jquery获取更改dom元素常用方法
4.jQuery元素：属性获取修改，内容操作，遍历，元素创增删
qq_33651064的博客
04-21 487
1.属性的获取与修改 获取自带属性prop 获取自定义属性attr data设置的值在dom代码里看不见，调用的话，用2方法获取。 data("index")获取的是数字型哦。 <a href="http://www.itcast.cn" title="都挺好">都挺好</a> <input type="checkbox" na...
jQuery操作文本和增删元素
python全栈
01-27 436
1
jQuery.rar_JavaScript/JQuery_JavaScript_
08-12
jQuery提供了方便的DOM操作接口，如`.append()`, `.prepend()`, `.before()`, `.after()`等，可用于在DOM树中添加、删除或修改元素。`.html()`, `.text()`, `.val()`则分别用于获取或设置元素的HTML内容、文本内容和...
jquery.multiselect多选下拉框实现代码
11-26
`jQuery.multiselect` 是一个基于 jQuery 的扩展插件，用于创建功能丰富的多选下拉框。这个插件提供了用户友好的界面，包括全选、全不选和自定义选择项的显示。以下是对如何实现 `jQuery.multiselect` 多选下拉框的...
JavaScript-primary.rar_JavaScript/JQuery_JavaScript_
08-11
Document Object Model (DOM) 是HTML和XML文档的结构表示，JavaScript通过DOM API可以对网页内容进行动态操作，包括添加、删除和修改元素，以及获取元素属性和样式。 4. **事件处理** 事件是用户与网页交互时发生...
jquery获取对象方法 及修改标签内容
陈福国的博客
06-29 1313
使用jQuery获取对象的方法及步骤 1.在文件中导入jQuery文件 2.在title位置导入 3.使用jQuery方法调用div或被调用元素的id 此处以div为例 $("#id名")；即获取jq对象 4.调用jq对象的方法： 1.对象.html();获得对象本身 2.对象.html(“新的内容”)；即显示新的内容 原有标签内容被修改 <!DOCTYPE html> <ht...
前端专题 JQuery对属性的获取和修改操作
weixin_44131922的博客
08-08 136
内容比较简单，直接上代码，边看边试 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script> <script type="text/javascript">
基于jq和纯js的 读取本地.txt文件的方法
352328759的博客
04-09 1万+
好像ajax本来就可以读到.txt <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>读取txt文件</title> </head>...
jQuery—选择器使用和更改元素属性和文本内容
Scrow1204的博客
08-21 6107
HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试&lt;/title&gt; &lt;script src="jquery-3.3.1.js"&am
jQuery修改标签的内容或值
licanty的博客
05-11 3万+
我一直知道要修改标签的内容和值有三种方式，但是最近遇到一项目却让我在改变表单元素的值上浪费了很多时间，其实我大概都知道他们的区别在哪里，只是有的shih
jQuery只修改元素中的文本,不修改元素中的其他元素
qq_33380252的博客
03-15 4235
结构大致如下： &lt;div id="div1"&gt; 修改前数据 &lt;span&gt;&lt;/span&gt; &lt;/div&gt; $("#div1").html($("#div1").html().replace("修改前数据","修改后数据")) 如果修改前数据就是该div中的全部文字，可以用$("#div1
用jQuery修改元素
weixin_48047636的博客
05-10 1480
jQuery简介 1.版本兼容: jq1.x兼容IE8这样的旧浏览器 2.x不兼容旧浏览器,支持ES6 3.x不兼容旧浏览器,支持ES6 2.Jq的缺点:js文件是在我们自己的服务器上的,用户离我们服务器近就访问速度快,反之不 3.什么是 cdn网络:就是jquery存在一个服务器时,它会分发到别的同一个公司放置在各地的服务器,当客户端需要jquery时会跟cdn要,cdn就会查找哪一个存有jquery的服务器离客户端最近 4.两种引入jquery的方式–>下载引入jq文件/使用cdnjs文件
jQuery设置和获取span的内容 （详解）
热门推荐
a0701302的专栏
05-20 16万+
先看个示例，示例代码如下： var test1=$("#spId").val(); var test2=$("#spId").html(); var test3=$("#spId").text(); alert("val的值：" + test1); alert("html的值：" + test2);
jQuery.获取更新元素文本text()
weixin_34067102的博客
07-21 543
获取更新元素文本text() text() 方法，获取元素文本，也可以设置元素的文本值。相当于JavaScript中的textContent。 <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta c...
jQuery入门指南：简化JavaScript编程
6. **CSS操作**：通过jQuery可以快速更改元素的样式，如`$("div").css("color", "red")`将所有div元素的颜色设置为红色。 7. **AJAX**：jQuery的`.ajax()`函数使得异步数据请求变得简单，可以方便地进行JSON、XML等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值