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 id="span_id">span的文本</span>的取值。

js取<span>的值并不是用document.getElementById('span_noticesg').value，而是document.getElementById('span_id').innerText。

jquery取<span>的值，是$("#span_noticesg").html();

2、<span id="span_id"></span>的赋值。

$('#span_id').html("span的文本");

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"}];

1

进行遍历的时候，可以直接通过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"}]};

1

进行遍历之前得先解析出标准的json数组格式即[{},{}]

var data= result.datas;

1

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对象来进行返回解析

js向标签中添加文本或其他的简例的更多相关文章

  1. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  2. 如何给HTML标签中的文本设置修饰线

    text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...

  3. js限制输入数字能输入小数点，js定义数组，js往数组中添加数据，js将字符型转为数字型，除法结果保留两位小数——js小测：计算比赛得分

    一个朋友跟我说要去给某个比赛算分: 规则:去掉最低分最高分求平均分: 最近在学习大数据可视化——图谱,用到js一些东西,所以今天就用js练练 用到知识点: js限制输入数字能输入小数点,js定义数组, ...

  4. selenium获取标签中的文本

    # 寻找文本所在的标签waitClickCompanyName = driver.find_elements_by_xpath('//div[@id="nsrzt"]//li') ...

  5. matlab图形中添加文本框

    图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...

  6. 关于在"a"标签中添加点击事件的一些问题

    昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate() ...

  7. 【实践】js 如何实现动态添加文本节点

    对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...

  8. js获取div中的文本框数据

    通过div得到div里的所有数据 大神的世界无需解释,当然不是说我,当我看到这些代码的时候我惊呆了! 这是一个工具方法js: js: /* * 获取指定对象下的所有input.textarea值 * ...

  9. Java 在PPT中添加文本水印的简易方法（单一/平铺水印）

    [前言] 在PPT幻灯片中,可通过添加形状的方式,来实现类似水印的效果,可添加单一文本水印效果,即在幻灯片中心位置水印以单个文本字样显示,但通过一定方法也可以添加多行(平铺)文本水印效果,即在幻灯片中 ...

随机推荐

  1. LeetCode 389——找不同

    1. 题目 2. 解答 2.1. 方法一 将 s 和 t 转化为 Python 的列表,然后遍历列表 s 的元素,将它们从列表 t 中删除,最后列表 t 中会余下一个元素,即为所求. class So ...

  2. [leetcode-652-Find Duplicate Subtrees]

    Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...

  3. 预处理器&预处理变量&头文件保护&条件编译

    [常见的预处理功能] #include 头文件保护符 条件编译 [预处理器] 编译之前执行的一段程序,可以部分地改变我们所写的程序 举个例子:当预处理器看到#include标记时就会用指定的头文件的内 ...

  4. 【iOS开发】动态添加子视图 UIView 的正确方法

    很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...

  5. 使用PHP静态变量当缓存的方法

    下面这个PHP的代码实例,功能是帮助用户重置密码,requestResetPassword是接收用户重置密码的请求并且做了相应的检查.为了更好的复用性,我将重置密码的操作单独分配到一个新的resetP ...

  6. 【bzoj3813】奇数国 线段树

    题目描述 给出一个长度为n的序列,每个数都可以由前60个质数的乘积表示,初始每个数都是3.支持两种操作:(1)修改一个数 (2)查询一段区间内所有数的乘积的欧拉函数值模19961993. 输入 第一行 ...

  7. json数据中的某一个字段进行快速排序quicksort

    快速排序(Quicksort)是对冒泡排序的一种改进,是一种分而治之算法归并排序的风格. 核心的思想就是通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小 ...

  8. hihocoder 1465 循环串匹配问题（后缀自动机）

    后缀自动机感觉好万能 tries图和ac自动机能做的,后缀自动机很多也都可以做 这里的循环匹配则是后缀自动机能做的另一个神奇功能 循环匹配意思就是S是abba, T是abb 问'abb', 'bba' ...

  9. 【题解】ZJOI2010贪吃的老鼠

    %%%%真的好强...看题解我都看了好久才完全明白.放一下参考的博客,谢谢神犇QAQ 1号博客    2号博客(超级赞的啦) 因为理解的过程太艰辛,所以必须记录一下这道强题:这道题目最难的两个约束就在 ...

  10. 【BZOJ 3316】JC loves Mkk 01分数规划+单调队列

    单调栈不断吞入数据维护最值,数据具有单调性但不保证位置为其排名,同时可以按照进入顺序找出临近较值单调队列队列两端均可删除数据但只有队末可以加入数据,仍然不断吞入数据但同时可以额外刨除一些不符合条件的数 ...