zoukankan      html  css  js  c++  java
  • 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对象来进行返回解析
  • 相关阅读:
    【linux 文件管理】7-文件重定向
    by David Bombal CCNA with kali linux
    【linux 文件管理】6-软链接和硬链接
    13.mysql索引的使用
    11.mysql SQL优化之SQL问题定位
    mysql服务常用命令
    10.mysql存储引擎
    9. Mysql的体系结构概览
    8.mysql触发器
    项目上线部署
  • 原文地址:https://www.cnblogs.com/xh_Blog/p/8646031.html
Copyright © 2011-2022 走看看