一、非DOM方法添加

1、document.write()

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        function insertParagrah(txt) {

            var str = "<i>";

            str += txt;

            str += "</i>";

            document.write(str);

        }

        insertParagrah("Hello World!");

    </script>

</head>

<body>

</body>

简单的说下:这个方法无法向特定的标签下添加内容,还有就是与MIME类型application/xhtml+xml  不兼容,虽然能实现向文档下添加内容和元素的功能,但是不是很推荐使用；

2.innerHtml属性

这个属性几乎所有的浏览器都支持,但是这个属性并不是W3C DOM的标准的组成部分,最重要的是这个属性Html5都支持。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

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

            alert(testdiv.innerHTML);

        }

    </script>

</head>

<body>

    <div id="testdiv">

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

    </div>

</body>

</html>

输出i:<p>This is<em>my</em>Content.</p>;                 nnerHtml毫无细节可言，如果你想要获得ID=testdiv下的细节只能通过dom的属性和方法；

innHtml就像一把大锤一样粗放,而标准化的DOM就像手术刀一样精细。大锤也会有大锤的用处,当你需要把一大段html加入到文档里时,显然用innerHtml更合适.innerHtml不仅支持读取,还支持写入；

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

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

            targetdiv.innerHTML = "<p>This is<em>my</em>Content.</p>";

        }

    </script>

</head>

<body>

    <div id="targetdiv"></div>

</body>

</html>

二、DOM方法添加内容

1、createElement()

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var para = document.createElement("p");//创建一个p标签

            var info = "nodeName:";

            info += para.nodeName;

            info += "   nodeType:";

            info += para.nodeType;

            alert(info);

        }

    </script>

</head>

<body>

</body>

</html>

输出：nodeName:P   nodeType:1    注意:根据输出我们可以判断当使用document.createElement()方法创建出<p></p>标签时他就已经存在了,虽然这个p标签还没被添加到文档树中,这种情况称之为"文档碎片";

2、appendChild()

创建完我们需要创建的标签之后,就需要将创建好的标签添加到需要添加的地方,appendChild()方法就是干这个的。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

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

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

            testdiv.appendChild(para);

        }

    </script>

</head>

<body>

    <div id="testdiv"></div>

</body>

</html>

运行html文件,成功添加;

3、createTextNode()

ok，现在我们在我们需要添加标签的地方成功了的添加了标签,接下来就是往标签里面添加文本内容了,createTextNode()就是干这个的;

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

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

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

            testdiv.appendChild(para);

            var em_txt = document.createTextNode("Hello World!");

            para.appendChild(em_txt);

        }

    </script>

</head>

<body>

    <div id="testdiv"></div>

</body>

</html>

成功添加；  注意appendChild的顺序,添加的顺序可以有很多种，你可以先把变迁和内容创建好,再向对应的容器append.顺序不同可能会影响最后的添加成败！

JavaScript之向文档中添加元素和内容的方法的更多相关文章

  1. 利用java从docx文档中提取文本内容

    利用java从docx文档中提取文本内容 使用Apache的第三方jar包,地址为https://poi.apache.org/ docx文档内容如图: 目录结构: 每个文件夹的名称为日期加上来源,例 ...

  2. [daily][troubleshoot][archlinux][wps][font] wps文档中的图内容无法显示中文

    序 用linux作为工作生产环境的几个需要解决的问题之一是:文档协作,即如何兼容Micro$oft Office格式的文档. 我一般的工作方式是:在linux下创建一个win7的虚拟机,安装常用的wi ...

  3. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  4. MVC架构下，使用NPOI读取.DOCX文档中表格的内容

    1.使用NPOI,可以在没有安装office的设备上读wiod.office.2.本文只能读取.docx后缀的文档.3.MVC架构中,上传文件只能使用form表单提交,转到控制器后要依次实现文件上传. ...

  5. [No00005B] word快速插入当前时间&怎样一次性删除文档中的全部链接

    按Alt+Shift+D键来插入系统日期 按Alt+Shift+T键则插入系统当前时间 同时,在插入的时间上右键->编辑域 一次性删除文档中的全部链接: 方法1:一劳永逸法(推荐) 因为链接大多 ...

  6. 【Linux】用grep在文档中查找内容

    有时候,我们需要在文档中查找一些内容,常用grep.它在文档查找相关内容并输出匹配行. > 查找某关键字 在system.log中,查找包含keyword的行 grep 'keyword' sy ...

  7. Paragraph 对象'代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。

    Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...

  8. Java解析word,获取文档中图片位置

    前言(背景介绍): Apache POI是Apache基金会下一个开源的项目,用来处理office系列的文档,能够创建和解析word.excel.ppt格式的文档. 其中对word文档的处理有两个技术 ...

  9. 在Word2010文档中显示域代码而非域值

    当Word2010文档中含有域内容时,默认情况下显示域值,这样可以使插入的域内容清晰明了.用户可以根据需要选择显示域代码或显示域值,操作步骤如下所述: 步骤/方法 第1步,打开Word2010文档窗口 ...

随机推荐

  1. 960 grid 分析

    960 网格系统的构造如下:页面总宽度 960px12 栏布局, 每栏 60px每栏两边保留 10px 的外边距, 相当于 20px 的槽内容区域总宽度是 940px 960 布局无疑是非常好的网格系 ...

  2. Linux中service命令和/etc/init.d/的关系

    Linux中service命令和/etc/init.d/的关系   service xxx启动 /etc/init.d/ 目录下的xxx脚本 如一个脚本名为 mysvc保存在/etc/init.d/下 ...

  3. instance variables may not be placed in categories

    Avoid Properties in Categories Objective-C分类中是不允许增加成员变量的(Instance variables may not be placed in cat ...

  4. poj 2513 Colored Sticks (trie 树)

    链接:poj 2513 题意:给定一些木棒.木棒两端都涂上颜色,不同木棒相接的一边必须是 同样的颜色.求能否将木棒首尾相接.连成一条直线. 分析:能够用欧拉路的思想来解,将木棒的每一端都看成一个结点 ...

  5. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  6. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

  7. uva12589

    题目大意:给n(n<=50)个向量(xi,yi) (0<=xi<=yi<=50),选出其中k(1<=k<=n)个,从(0,0)点开始,依次首尾相连,求此k个向量与x ...

  8. opcache effect

    with open opcache, the monitor cpu idle log , there are so much curl_exec and gzip in our php logic ...

  9. Jexus 配置多个站点

    一:jexus配置站点的文件在 siteconf文件夹中,里面有多少个配置文件,就可以配置多少个站点 如我的里面有3个配置文件,其中default是原始文件,site1和siteconf就是我网站的配 ...

  10. QF——OC中的SEL类型和Block

    @selector(): 可以理解@selector()就是取类方法的编号,他的基本行为类似于C语言中的函数指针(指向函数的指针).它们通过传递方法的地址(或编号)来实现把方法当做参数的效果. 不过在 ...