javascript也可以改变网页的结构和内容

  • document.write()方法

可以方便快捷地把字符串插入到文档里

document.write("<strong>hello world.</strong>");

/*
function insertP(text){
var str = "<p>";
str += text;
str +="</p>";
document.write(str);
}
insertP("hello world!"); */
  • innerHTML属性

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

<div id="test">

</div>
<script type="text/javascript">
window.onload = function(){
var testdiv = document.getElementById("test");
testdiv.innerHTML ="<p>这是一句话</p>"
}
</script>
  • createElement()方法

创建一个元素节点。这个方法本身并无实际用处,需要把新创建出来的元素插入文档才能达到实际目的。

document.creatElement(node.name)

  • appendChild()方法

让新创建的节点成为文档某个现有节点的一个子节点。

parent.appendChild(child)

var test = document.getElementById("test");
var para = document.createElement("p");
test.appendChild(para);
//document.getElementById("test").appendChild(document.createElement("p"));
  • creatTextNode()方法

创建一个文本节点。语法:document.creatTextNode(text)

var test = document.getElementById("test");
var txt = document.createTextNode("hello world");
test.appendChild(text);
  • insertBefore()方法

这个方法将把一个新 元素插入到一个现有元素的前面。想调用此方法,必须知道三件事:

-想插入的新元素

-想把新元素插入到哪个现有元素的前面

-这两个元素共同的父元素

parentElement.insertBefore(newElement,targetElent)

比如,把description插入到图片列表imagegallery的前面。

var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefor(description,gallery);
  • 编写insertAfter()函数
/* 编写insertAfter函数 */
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefor(newElement,targetElement.nextSibling);
}
}

第七章 动态创建HTML内容的更多相关文章

  1. 《DOM Scripting》学习笔记-——第七章 动态创建html内容

    本章内容: 1.动态创建html内容的“老”技巧:document.write()和innerHTML属性 2.DOM方法:createElement(),creatTextNode(),append ...

  2. 实例讲解如何在Delphi中动态创建dxBarManager内容

    一.dxBarManager中一些非常重要的概念: TCategorys:为了方便对dxBarManager中的项目进行归类而设计的一个属性,当然,只使用默认的名字为Default的Category也 ...

  3. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  4. 《精通Spring4.X企业应用开发实战》读后感第七章(创建增强类)

  5. ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)

    好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Se ...

  6. 使用dxNavBar动态创建应用程序菜单

    一.如何动态创建dxNavBar内容: function TMain.GetAcitonByCaption(const aCategory,aCaption: string): Integer; va ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (38) ------ 第七章 使用对象服务之动态创建连接字符串和从数据库读取模型

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第七章 使用对象服务 本章篇幅适中,对真实应用中的常见问题提供了切实可行的解决方案. ...

  8. js中几种动态创建元素并设置文本内容的比较,及性能测试。

    内容 1 appendChild (都兼容) 2.insertAdjacentHTML (都兼容) 3.innerHTML (都兼容) 4.createDocumentFragment (都兼容) 动 ...

  9. 精通Web Analytics 2.0 (9) 第七章:失败更快:爆发测试与实验的能量

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第七章:失败更快:爆发测试与实验的能量 欢迎来到实验和测试这个棒极了的世界! 如果Web拥有一个超越所有其他渠道的巨大优势,它就 ...

随机推荐

  1. bzoj2132: 圈地计划(最小割)

    传送门 看来以后见到矩形就要黑白染色冷静一下了…… 首先,如果它的要求时候相邻的选择相同,那么就是和这一题一样了->这里 然后考虑不同的要怎么做 那就把矩形黑白染色一下吧 然后令其中一种颜色的A ...

  2. Maven中如何利用继承创建web项目(分层开发)

    1.创建父项目parent 新建——Maven Project——勾选Create a Simple Project(skip archetype selected)——填写parent坐标,注意打包 ...

  3. BootStrap系统

    BootStrsp的引入: <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="// ...

  4. linux中使用wget模拟爬虫抓取网页

    如何在linux上或者是mac上简单使用爬虫或者是网页下载工具呢,常规的我们肯定是要去下载一个软件下来使用啦,可怜的这两个系统总是找不到相应的工具,这时wget出来帮助你啦!!!wget本身是拿来下载 ...

  5. Windows安装IIS后,启动网站报错:不能在此路径中使用此配置节……

    在IIS里启动设置好的网站(ASP.net网站),浏览器报如下错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault= ...

  6. 01-----jQuery介绍

    安装node.js cmd查看 node -v npm -v npm init --yes     初始化 npm install jquery --save   1.为什么要使用jQuery    ...

  7. java——方法重载与重写、构造方法、this关键字、static关键字、strictfp关键字、类的导入

    Java SE5新增加@Override注解,它并不是关键字,但是可以把它当作关键字使用.当你想要覆写(重写)某个方法时,可以选择添加这个注解,在你不留心重载而并非覆写了该方法时,编译器就会生成一条错 ...

  8. C# String.Format方法

    一.定义String.Format是将指定的 String类型的数据中的每个格式项替换为相应对象的值的文本等效项. 如: (1)string p1 = "Jackie";strin ...

  9. 牛客网Java刷题知识点之表达式类型的自动提升

    不多说,直接上干货!

  10. asp.net 中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction

    1.带有Render的方法返回值是void,在方法内部进行输出:不带的返回值类型为MvcHtmlString,所以只能这样使用: @Html.Partial 对应 @{Html.RenderParti ...