当前位置: 首页 > news >正文

动态创建HTML内容

document.write()方法

document.write方法可以方便快捷的把字符串插入到文档里。它最大的缺点是违背了”分离javascript“原则。即使把document.write语句挪到外部函数里,你也还是需要在HTML文档的<body>部分使用<script>标签才能调用哪个函数。

 

innerHTML属性

innerHTML属性可以用来读、写某给定元素里的HTML内容。

<div id="textidv">

<p>This is <em>my</em> content.</p>

</div>

<em>标签是斜体的意思.

标准化DOM就像是一把手术刀,innerHTML是一把劈材刀。

当需要把一大段HTML内容插入一个网页时,innerHTML属性更适用。它是一个读写方法,不仅可以用它来读出元素的HTML内容,还可以用它把HTML内容写入元素。

innerHTML属性要比document.write()方法更值得推荐。

 

DOM提供的方法

DOM是一个双向车道,不仅可以查询文档的内容,还可以刷新文档的内容。只要改变了DOM节点树,文档在浏览器里呈现效果就会发生变化。

 

createElement()方法

appendChild()方法

createTextNode方法 

      var testdiv = document.getElementById("testdiv");

  var para = document.createElement("p");

  testdiv.appendChild(para);

      var txt = document.createTextNode(”hello world!");

      para.appendChild(txt);

 

insertBefore()方法

    parentElement.insertBefore(newElement,targetElement

insertAfter()方法

    function insertAfter(newElement,targetElement){

         var parent = targetElement.parentNode;

         if(parent.lastChild == targetElement){

                  parent.appentChild(newELement); 

        

          else{

               parent.insertBefore(newElement,targetElement.nextSibling);

          }

   }

 

 

 

 

 

 

转载于:https://www.cnblogs.com/Eleanore/archive/2012/05/25/2518164.html

相关文章:

  • 保存对象的不同状态值
  • Linux练习(write写入)
  • matlab练习程序(随机游走图像)
  • 远程桌面连接记录彻底清除
  • Android中使用WebView, WebChromeClient和WebViewClient加载网页
  • 多态的好处和弊端以及多态的理解
  • 要乐观对待生活
  • web计算器
  • iptables的配置文件/etc/sysconfig/iptables不存在怎么办
  • MySQL控制(关闭、打开)自动提交功能
  • beego框架之orm模块——sqlite
  • 数据库的连接池
  • JavaWeb学习总结(五十一)——邮件的发送与接收原理
  • xml文件的读取
  • Java 反射机制(一)
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • vue 个人积累(使用工具,组件)
  • Vue.js 移动端适配之 vw 解决方案
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 近期前端发展计划
  • 精彩代码 vue.js
  • 聊聊flink的TableFactory
  • 你真的知道 == 和 equals 的区别吗?
  • 如何解决微信端直接跳WAP端
  • 使用Swoole加速Laravel(正式环境中)
  • 小程序开发之路(一)
  • 学习JavaScript数据结构与算法 — 树
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • #define
  • (1)(1.8) MSP(MultiWii 串行协议)(4.1 版)
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (12)目标检测_SSD基于pytorch搭建代码
  • (14)Hive调优——合并小文件
  • (6)STL算法之转换
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (三)c52学习之旅-点亮LED灯
  • (算法二)滑动窗口
  • (转)大型网站架构演变和知识体系
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET Core 版本不支持的问题
  • .Net IOC框架入门之一 Unity
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .NET 设计模式—简单工厂(Simple Factory Pattern)
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .考试倒计时43天!来提分啦!
  • @DependsOn:解析 Spring 中的依赖关系之艺术
  • @ModelAttribute注解使用
  • [20160807][系统设计的三次迭代]
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决
  • [C++ 从入门到精通] 12.重载运算符、赋值运算符重载、析构函数