<!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. OpenCV学习4-----K-Nearest Neighbors（KNN）demo

    最近用到KNN方法,学习一下OpenCV给出的demo. demo大意是随机生成两团二维空间中的点,然后在500*500的二维空间平面上,计算每一个点属于哪一个类,然后用红色和绿色显示出来每一个点 如 ...

  2. 采用c#实现功能1

    看了好多c#的菜鸟教程不如自己开始动手打代码,最终实现了功能一,参考了网上的wordcount代码发现无论是c++还是c#大部分采用的是哈希表的方法实现的,本来还想仅用循环实现遍历句子中的所有字符,即 ...

  3. Hadoop之block研究

        本文翻译原链接:https://hadoopabcd.wordpress.com/2015/03/17/hdfs-file-blocks-distribution-in-datanodes/ ...

  4. Java 动态绑定和多态

    动态绑定和多态 动态绑定是指:"在执行程序期间(而非编译期间),判断引用所指对象的实际类型,调用其相应的方法." 动态绑定(多态)存在的条件 要有继承. 要有重写. 父类引用指向子 ...

  5. 【Linux】- CentOS 防火墙iptables和firewall

    1 iptables防火墙 1.1 基本操作 # 查看防火墙状态 service iptables status   # 停止防火墙 service iptables stop   # 启动防火墙 s ...

  6. linux解压zip

    用 unzip 的先安装 yum install -y unzip #unzip file.zip -d /root  -d指解压路径 ,不写的话默认当前目录

  7. Redis 学习之常用命令及安全机制

    该文使用centos6.5 64位    redis3.2.8 一.redis常用命令 键值常用命令: 1. keys 返回满足pattern的所有key. 127.0.0.1:6379> ke ...

  8. Java序列简单使用

    package javatest; import java.io.*; public class SerializableTest implements Serializable { public s ...

  9. BZOJ 3507 通配符匹配(贪心+hash或贪心+AC自动机)

    首先可以对n个目标串单独进行处理. 对于每个目标串,考虑把模式串按'*'进行划分为cnt段.首尾两段一定得于原串进行匹配.剩下的cnt-2段尽量与最靠左的起点进行匹配. 对于剩下的cnt-2段.每段又 ...

  10. 【bzoj4842】[Neerc2016]Delight for a Cat 线性规划与网络流

    题目描述 $n$ 个连续的位置,每个位置可以填入 S 和 E ,第 $i$ 个位置填入 S 可以获得 $s_i$ 的收益,填入 E 可以获得 $e_i$ 的收益.要求每连续的 $k$ 个位置必须包含至 ...