<!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. SpringBoot在IntelliJ IDEA下for MAC 热加载

    说在前面 热加载:文件内容变更服务器自动运行最新代码.实则在IDEA环境进行热部署后,下述过程一气呵成. 1代码变更,文件自动保存(IDEA自动保存代码,用户无需使用COMMAND+SAVE快捷键): ...

  2. mybatis 枚举类型使用

    一.首先定义接口,提供获取数据库存取的值得方法,如下: public interface BaseEnum { int getCode(); } 二.定义mybatis的typeHandler扩展类, ...

  3. Linux下安装paramiko

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支持的平台, ...

  4. 3dContactPointAnnotationTool开发日志（十二）

      因为ReferenceImage的锚点是固定的左下角,缩放时controller面板也会跟着动.为了使Scale的时候controller上的slider不会远离指针,于是把controller固 ...

  5. 多线程Worker初尝试

    多线程这个概念,不知道听了多少遍.但是真滴没有去实操过. 前几天看视频听到作者说道关注技术本身,而不是总写业务代码.这几天依然思考着这个问题.于是从头开始重现了html文件的堵塞问题,重现了html文 ...

  6. 某一线互联网公司前端面试题js部分总结

    js部分 1,使用严格模式的优点 - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度 ...

  7. js 事件阻止传播方法,准确定位事件源

    1事件冒泡 在目标元素获得机会处理事件后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序.如果是,则也调用父元素的处理程序.在这之后,再检查其父元素,然后父元素,然后父元素...持续不 ...

  8. 【bzoj4008】[HNOI2015]亚瑟王 概率dp

    题目描述 $n$ 张牌,$r$ 轮游戏,每轮从左向右操作,遇到第 $i$ 张牌有 $p_i$ 的概率选中,选中会产生 $d_i$ 的贡献,丢弃掉该牌并结束这一轮,否则继续下一张.问最终的期望贡献. 输 ...

  9. MD5 十六进制加密

    MD5的加密方法很多,今天说下MD5的十六进制加密···先贴方法···· class Program { static void Main(string[] args) { //202cb962ac5 ...

  10. LUOGU 1440

    #include<cstdio> #include<algorithm> #include<cstring> #define N 1000005 using nam ...