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对象来进行返回解析
  • 相关阅读:
    Working with macro signatures
    Reset and Clear Recent Items and Frequent Places in Windows 10
    git分支演示
    The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.
    Build website project by roslyn through devenv.com
    Configure environment variables for different tools in jenkins
    NUnit Console Command Line
    Code Coverage and Unit Test in SonarQube
    头脑王者 物理化学生物
    头脑王者 常识,饮食
  • 原文地址:https://www.cnblogs.com/xh_Blog/p/8646031.html
Copyright © 2011-2022 走看看