<!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内动态载入另一个页面非常相似！

JS把内容动态插入到DIV的更多相关文章

  1. js数组及动态插入节点数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. js 动态添加元素（div、li、img等）及设置属性

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...

  3. Js 动态插入css js文件

    function loadjscssfile(filename,filetype){ var file, //动态插入的文件 doc = document; if(filetype == " ...

  4. margin-bottom无效问题以及div里内容动态居中样式!

    最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料 ...

  5. jquery动态插入行

    这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...

  6. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  7. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  8. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  9. 前后端分离，如何在前端项目中动态插入后端API基地址？（in docker）

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

随机推荐

  1. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  2. HADOOP docker(十):hdfs 结构体系

    1.简介2.namenode和datanode3.The File System Namespace 文件系统命名空间4.Data Replication 数据复制5.Replica Placemen ...

  3. this指针与const成员函数

    this指针的类型为:classType *const      // 即指向类类型非常量版本的常量指针 所以,我们不能把this绑定到一个常量对象上 ===>  不能在一个常量对象上调用普通的 ...

  4. 第十六次ScrumMeeting会议

    第十六次Scrum Meeting 时间:2017/12/6 地点:线上+SPR咖啡馆 人员:蔡帜 王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 照片: 目前工作进展 名字 今日 明天的工作 遇到 ...

  5. Alpha项目冲刺_博客链接合集

    组员 学号 林泽宇(队长) 211606317 李涵 211606365 尹海川 211606388 郏敏杰 211606307 何永康 211606362 陈炳旭 211606353 苏宇翔 211 ...

  6. 开启假期JAVA之路

    . 从最基础的JAVA开始学起,已经上了三节课啦!希望在课程结束后能完成一个令自己满意的连连看项目,期待ing~ 慢慢的从简单的代码上手了~ . 用循环输出等腰三角形的效果 import java.u ...

  7. 从零讲JAVA ，给你一条 清晰地学习道路！该学什么就学什么！！

    1.计算机基础: 1.1数据机构基础: 主要学习:1.向量,链表,栈,队列和堆,词典.熟悉2.树,二叉搜索树.熟悉3.图,有向图,无向图,基本概念4.二叉搜索A,B,C类熟练,9大排序熟悉.5.树的前 ...

  8. osg::Vec2 Vec3 Vec4

    osg::Vec2可以用于保存2D纹理坐标. osg::Vec3是一个三维浮点数数组. osg::Vec4用于保存颜色数据.

  9. 3dContactPointAnnotationTool开发日志（十九）

      增加了输出接触点信息到文件功能.

  10. Unity3d学习日记（二）

      跟着教程做让背景可以滚动起来并添加了背景的粒子特效,加入了敌机.   ctrl攻击,↑↓←→移动,Game Over后按R重新开始游戏.   Space Shooter游戏地址:http://ya ...