js对div取值与赋值

  • 因为JavaScript运行时,id="test1" 的那个div元素可能还没解析和加载,js加载是有顺序的。只需把 js 整个搬到 后面即可。

  • 还有一个特别容易犯的毛病,页面引入 jQuery ,如果其他 js 要使用,需要放在 jQuery 之后,否则不能使用。

  • 测试案例:

      <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>div 测试</title>
    </head> <body>
    <div id="id1">id1</div>
    <div id="id2"></div>
    <div id="id3"></div>
    <div id="id4"></div>
    <div id="id5" style="width: 100%;height: 500px;"></div>
    <div>
    <!--iframe的样式是可以调整的,具体可以参考相关文档-->
    <iframe src="http://www.baidu.com/" width="100%" height="500px"> </iframe>
    </div> <div class="content-wrap">
    <div class="content-wrap-inner"> </div>
    </div> <script>
    //假设你的html中有以下的div
    //如果是要获取id是id1的div的数据, 获取div里面的内容有两种方式
    //1, 纯js获取数据
    var a = document.getElementById("id1").innerText;
    alert(a);
    //2, jqeury获取数据
    var a = $("#id1").html();
    var b = $("#id1").text();
    alert(a + "1234");
    alert(b + "5678");
    //3, 纯js写入数据
    document.getElementById("id2").innerHTML = "id2";
    //4,jqeury写入数据
    $('#id3').html("id3");
    $("#id4").text("id4"); //div 引入其他页面
    //load只能引入自己内部页面
    $('.content-wrap-inner').html('');
    $('.content-wrap-inner').load("test.html"); //网址引入不进去
    //$('#id5').load("http://www.baidu.com/");
    $('#id5').load("test.html");
    </script>
    </body>
    </html>
  • 更多精彩内容,请关注微信关注公众号 明叶师兄的学堂

js对div取值与赋值的更多相关文章

  1. JS表自动取值赋值

    /* * * V1.0.0 表单自动取值.赋值插件 * 表单类型:text radio select-one checkbox textarea * 注意项: * 1.表单必须设置name属性 * 调 ...

  2. jQuery对html元素的取值与赋值实例详解

    jQuery对html元素的取值与赋值实例详解 转载  2015-12-18   作者:欢欢   我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...

  3. [前端 2]常用的JQuery和Dom页面取值与赋值

    导读:书到用时方恨少,需要基础知识的时候,才悔恨自己没有总结学习好.前段时间调了好长时间的页面,突然发现自己之前不怎么在意的取值和赋值,真的是自己一个很薄弱的地方,有时候查半天都找不到一个对的,现在用 ...

  4. html常用标签的取值和赋值操作

    我们在html页面当中,面对各种各样的标签,经常需要处理取值和赋值的问题,下面,就把常见的一些html标签元素的取值和赋值操作进行总结整理,以后备用. 1.button:改变button按钮上面的值, ...

  5. JQuery TextArea的取值与赋值问题---(textarea中回车清空问题)——个人转载整理

    JQuery TextArea的取值与赋值问题---(textarea中回车清空问题) JQuery TextArea的取值与赋值问题 首先,说明这不是一个简单的问题! 先说取值: $("# ...

  6. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  7. easyui radio 类型的取值和赋值方法

    1.HTML 文件 <tr id="client_check1"> <th>委托人证件类型:</th> <td><input ...

  8. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  9. select2多选设置select多选,select2取值和赋值

    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给sel ...

随机推荐

  1. 2019-05-16 Ubuntu使用

    Ubuntu的基本操作 查看操作系统版本 https://www.hostingadvice.com/how-to/ubuntu-show-version/ clu@sha01vmdev08:~/so ...

  2. SQL:REGEXP

    作为一个更为复杂的示例,正则表达式B[an]*s匹配下述字符串中的任何一个:Bananas,Baaaaas,Bs,以及以B开始.以s结束.并在其中包含任意数目a或n字符的任何其他字符串. 以下是可用于 ...

  3. Java并发:搞定线程池(上)

    原文地址:https://www.nowcoder.com/discuss/152050?type=0&order=0&pos=6&page=0 本文是在原文的基础+理解,想要 ...

  4. CSS最基础的语法和三种引入方式

    **CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration ...

  5. 关于日历实现代码里lunarInfo(农历)数组

    var lunarInfo=new Array( 0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x0 ...

  6. git使用记录六:对commit的message做处理

    修改最新commit的message git commit --amend 修改老旧commit的message 查询最新的三个log soaeon@DESKTOP-FUJJTHR MINGW64 / ...

  7. 在Emacs中使用plantuml画UML图

    在Emacs中使用plantuml画UML图 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83 ...

  8. hdu3555 Bomb(数位dp)

    题目传送门 Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total ...

  9. linux+Apache开启伪静态配置

    linux+Apache伪静态配置 一.环境准备:CentOS Linux release 7.4.1708 (Core)1.配置源[root@localhost ~]#yum install -y ...

  10. 解决div和img之间的空隙

    div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...