一、非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. HDU4738【杭州网赛、判桥】

    刚拿到这道题时挺有思路,无奈平日里只敲过找割顶的代码,判桥的代码当时自己也没仔细敲. 当时一把泪啊,忽然感觉自己的图论才只是刚搞了个起步啊.. 题目有神坑.    就是先判是否连通,不连通直接输出0; ...

  2. Keil 中的预处理命令const

    在keil中,宏定义是一个重要内容.无参数的宏作为常量,而带参数的宏则可以提供比函数更高的调用效率.但预处理只是进行简单的文本代替,而不做语法检查,所以会存在一些问题. 例如:#define BUFS ...

  3. Apache的Access.log分析总结

    Apache的Access.log分析总结 #查看80端口的tcp连接  #netstat -tan | grep "ESTABLISHED" | grep ":80&q ...

  4. c++策略模式

    这几天需要学习一下设计模式来为设计代码结构使得代码可扩展性强,代码更加易于维护,不用想很长时间也不知道怎么去设计一个工具的代码. 我的理解策略模式: 1.有一个策略基类,策略类是什么呢?策略类就是一个 ...

  5. iOS 圆角那些事(转)

    似乎没有那家公司比Apple更爱圆角了,事实上,圆角也会让图形/产品看起来更加无侵略性,能够带来更好的用户体验.iOS开发中各种圆角也随处可见,最简单给控件添加圆角的方式就是给视图的layer设置co ...

  6. C#反射概念以及实例详解【转】

    2009-08-28 13:12 佚名 互联网 我要评论(1) 字号:T | T C#反射概念以及实例向你介绍了C#反射的基本内容以及C#反射实例的简单应用,希望对你了解和学习C#反射以及C#反射实例 ...

  7. Flash，一次Bug的思考

    我绝对不算是F黑,大部分时候,我还是很挺Flash平台的,Flash提供了很好的跨平台特性以及Flash Player11后的GPU加速.Stage3D等等,对于开发者来说,绝对让人欣喜若狂(对我是这 ...

  8. 关于Resharper的使用经验

    发现Resharper这东西真的有点累赘,重构也是,一开始用会有很多莫名其妙的提示.现在的项目用了Resharper,js是很方便,有定位功能,但连TypeScript的js都有了.

  9. 获取xml文件

    <?xml version="1.0" encoding="utf-8" ?><ArrayOfSystemRool xmlns:xsi=&qu ...

  10. 6.828 lab1 bootload

    MIT6.828 lab1地址:http://pdos.csail.mit.edu/6.828/2014/labs/lab1/ 第一个练习,主要是让我们熟悉汇编,嗯,没什么好说的. Part 1: P ...