一、非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. SEO高手在扯蛋?

    真正的高手SEO你在扯蛋吗?当大家都很会扯的时候,高手扯得肯定比你疼,不是他们 蛋比较敏感,而是他们的确更用力. 当你说我是SEO时,高手肯定说现在我在做的是SEM. 当你说我是SEM时,高手肯定在说 ...

  2. c++ - How to use wstring and wcout to output Chinese words in Xcode? - Stack Overflow

    c++ - How to use wstring and wcout to output Chinese words in Xcode? - Stack Overflow How to use wst ...

  3. action中实现对批量文件上传的封装

    如今,文件(尤其是图片)上传,在前后台的应用相当普遍,上传头像.共享资料等已成为最基本应用.我们很希望通过一个万能的封装方法来实现一劳永逸的效果. 接下来,就来为大家介绍具体实现. 首先,我们需要一个 ...

  4. error: C2664: “zajiao::zajiao(const zajiao &)”: 无法将参数 1 从“const char [12]”转换为“char *”

    原本打算在QT用一个字符串"ABCDEF12345"作为类zajiao的构造函数的参数,用来创建类zajiao的对象zajiao1. zajiao zajiao1("AB ...

  5. 关于iOS9中的App Transport Security相关说明及适配（转）

    原文:http://my.oschina.net/vimfung/blog/494687 iOS9中新增App Transport Security(简称ATS)特性, 主要使到原来请求的时候用到的H ...

  6. Linux系统下安装phpmyadmin方法

    phpmyadmin下载地址:不要分,赶紧去下载吧!http://download.csdn.net/detail/u011986449/7429799 1.找到 /libraries/config. ...

  7. C#编程建言笔记

    方法: 1.方法(静态或实例)JIT编译后,在内存中的代码段上都是一个全局函数,且只存在一份拷贝. 2.方法修饰符:保护级别,静态,虚函数:方法签名:返回值,函数名,参数. 构造器: 1.一个方法只能 ...

  8. JDBC操作封装

    这两天学习了一下jdbc的封装,依据的是下面这篇 http://wenku.baidu.com/link?url=FaFDmQouYkKO24ApATHYmA5QzUcj-UE-7RSSZaBWPqk ...

  9. android入门——BroadCast(1)

    使用广播要定义一个广播接收类,如 package com.example.wkp.broadcast; import android.content.BroadcastReceiver; import ...

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

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