一、非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. Sass使用教程

    sass官网: http://sass-lang.com/ http://sass-lang.com/documentation/file.SASS_REFERENCE.html Sass和Scss的 ...

  2. 用ATL和MFC来创建ActiveX控件

    摘要:目前MFC和ATL代表了两种框架,分别面向不同类型的基于Windows的开发.MFC代表了创建独立的Windows应用的一种简单.一致的方法:ATL提供了一种框架来实现创建COM客户机和服务器所 ...

  3. poj2924---高斯求和

    #include <stdio.h> #include <stdlib.h> int main() { ; long long ans,a,b; scanf("%d& ...

  4. floodlight 学习（一）

    其实这个控制器应该没有多少人用了吧,一年多都没更新了,鉴于最近无论如何都要用这个,将学习笔记贴出来吧. 1.FloodlightProvider(Dev) 1.1简介:FloodlightProvid ...

  5. Xcode7.3.1真机调试ios10

    如果自己的ios测试机不小心升级到比Xcode更高的ios系统, 那么这时候是无法使用真机来进行调试的. 但是我们可以通过拷贝与测试机一样版本的系统来解决这个问题. 去下载一个Xcode8,然后安装, ...

  6. Android中数据库的操作流程详解

    Android中数据库的操作方法: 1.Android平台提供了一个数据库辅助类来创建或打开数据库. 这个辅助类继承自SQLiteOpenHelper类.继承和扩展SQLiteOpenHelper类主 ...

  7. DevExpress控件之：ChartControl 动态绑定数据

    private void BindData(ViewType vt) { chartControl1.Series.Clear(); //Series series1 = new Series(&qu ...

  8. php缓存生成及更新实现参考哦

    <?php //如果在find/findAll里传入了参数,则该参数即为key ORM::factory('article')->where('user_id', '=', '2')-&g ...

  9. c++中参数传递和函数返回简析

    1.参数传递: 每次调用函数时,都会重新创建该函数所有的形参,此时所传递的实参将会初始化对应的形参.形参的初始化与变量的初始化一样. 非引用类型:如果形参具有非引用类型,则复制实参的值.普通的非引用类 ...

  10. 使用SQL脚本删除冗余的视图和表

    使用SQL脚本删除冗余的视图和表 SQL脚本删除视图信息 USE DatabaseGOIF OBJECT_ID('ViewName')IS NOT NULLBEGINDROP VIEW ViewNam ...