js向标签中添加文本或其他的简例
1、如何用js 在div内插入内容?
不是改变内容,而是插入,就是在保留原内容的基础上,在尾部添加。举个例子。 元内容<div>你好</div> 插入后<div>你好世界</div> 最好不要用 获取原内容,然后在组合新字符串后改变正规内容
通过document.createTextNode来添加
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); var txt =document.createTextNode("世界"); oDiv.appendChild(txt); } </script> </head> <body> <div id="div1"> 您好 </div> </body> </html>
2、JS把内容动态插入到DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Testing</title> </head> <script type="text/javascript" src="example.js"> </script> <body> <div id="testdiv"> </div> </body> </html>
example.js 文件内容:
window.onload = function() { var testdiv = document.getElementById("testdiv"); testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>"; }
另一段代码:
window.onload = function() { var para = document.createElement("p"); var txt1 = document.createTextNode("I inserted "); var emphasis = document.createElement("em"); var txt2 = document.createTextNode("this"); var txt3 = document.createTextNode(" content."); para.appendChild(txt1); emphasis.appendChild(txt2); para.appendChild(emphasis); para.appendChild(txt3); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); }
这与在DIV内动态载入另一个页面非常相似!
3、span的赋值与取值
1、span的取值。
js取值:document.getElementById('span_id').innerText。并不是用document.getElementById('span_noticesg').value;
jquery取值:$("#span_noticesg").html();
2、<span id="span_id"></span>的赋值。
jQuery赋值:$('#span_id').html("span的文本");
js赋值:document.getElementById('span_id').innerText="span的文本";
4、jquery修改a标签的href链接和文字
以下修改a标签的href链接和修改文字的代码: <script type="text/javascript" src="http:/keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 原链接: <a href="http://keleyi.com" id="home_keleyi_com">柯乐义</a> 修改a标签的href链接: $('#home_keleyi_com').attr('href','http://keleyi.com'); 修改文字: $("#home_keleyi_com").text('柯乐义首页'); 修改后的链接为: <a href="http://keleyi.com" id="home_keleyi_com">柯乐义首页</a> 下面是完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery修改链接--柯乐义</title> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> </head> <body> jquery修改a标签的href链接和文字,先点击下面链接<br />然后点击"改变"按钮,然后点点击一次下面的链接,注意两次打开页面的不同:<br /> <a href="http://keleyi.com/a/bjac/d863921ed93d03ff.htm" id="home_keleyi_com" target="_blank">原文</a> <input type="button" value="改变" id="gb_keleyi_com" /> <script type="text/javascript"> $("#gb_keleyi_com").bind("click",function (){ $('#home_keleyi_com').attr('href','http://keleyi.com'); $("#home_keleyi_com").text('柯乐义首页');}) </script> </body> </html>
5、js解析json数组
解析json数组即对JSONArray的遍历 一、对于标准的json数组如: var result=[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}]; 进行遍历的时候,可以直接通过for循环遍历这个数组,有两种方法 1. for (var i = 0; i < result.length; i++)
{ //result[i]表示获得第i个json对象即JSONObject //result[i]通过.字段名称即可获得指定字段的值 result[i].userName; }
2. for(var i in result)
{ //表示遍历数组,而i表示的是数组的下标值, //result[i]表示获得第i个json对象即JSONObject //result[i]通过.字段名称即可获得指定字段的值 result[i].userName; } 二、对于不标准的json数组如:
var result={"datas":[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}]}; 进行遍历之前得先解析出标准的json数组格式即[{},{}] var data= result.datas; 1. for (var i = 0; i < data.length; i++)
{ //data[i]表示获得第i个json对象即JSONObject //data[i]通过.字段名称即可获得指定字段的值 data[i].userName; } 2. for(var i in data)
{ //表示遍历数组,而i表示的是数组的下标值, //data[i]表示获得第i个json对象即JSONObject //data[i]通过.字段名称即可获得指定字段的值 data[i].userName; } 注意点:eval()方法的作用 ** 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1. 一种为使用eval()函数。 2. 使用Function对象来进行返回解析
分类:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET10 - 预览版1新功能体验(一)