创建节点 
快捷键:innerhtml outerhtml innertext outertext

==============创建节点方法有两种:==============

<script src="js/domready.js"></script><!--这个必须引入,在搜狗输入法输入domready-->
<script type="text/javascript">
myReady(function(){
//-------给某个元素添加一个子元素以及文档内容---------
//1,找到需要创建节点的元素
//2,创建出所有需要创建的节点
//3,在逐步一个一个往父元素添加即可,包括txt=document.createTextNode(string);
var ul=document.getElementById("ul");
var li=document.createElement("li");
var txt=document.createTextNode("我爱你!");
ul.appendChild(li);
li.appendChild(txt);
})
----创建节点方法一:----一定要引入上面的domready.js文件----
myReady(function(){
////-------给某个元素添加多个子元素以及文档内容---------
//1,找出需要创建节点的元素
//2,创建出所有需要创建的节点。
//3,如果创建出来的节点有子节点,那么依次使用appendChild()进行添加
//4,创建文档片段,用于存放已经创建的文档:appendChild();
//5,最后把文档片段添加到需要创建节点的元素中。appendChild();

var ul=document.getElementById('ul');
var fragment=document.createDocumentFragment();//创建文档片段
for (var i = 0; i < 5; i++) {
var li=document.createElement("li");//创建li元素
var span=document.createElement("span");//创建span元素
var txt=document.createTextNode("span"+i);//创建文本节点
li.appendChild(span);//向li中添加子元素
span.appendChild(txt);//向span中添加文本内容
fragment.appendChild(li);//把每个li元素都添加到文档片段中
}
ul.appendChild(fragment);//把文档片段添加到ul对象中

//注释
var comment=document.createComment("A comment part");//创建注释对象
document.body.insertBefore(comment,document.getElementById('ul'));//指定需要注释的对象前面添加注释。
})
</script>

==============高效创建节点的方法==============

-------使用innerHTML创建节点-------

----创建节点方法二:----一定要引入上面的domready.js文件----
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var container=document.getElementById('container');
var str="<p>wo ai ni shi <strong>gu du de </strong>,you are my sumshime !</p>"
+"<ul>"
+"<li>我爱你是孤独的1</li>"
+"<li>我爱你是孤独的2</li>"
+"<li>我爱你是孤独的3</li>"
+"<li>我爱你是孤独的4</li>"
+"</ul>";
container.innerHTML=str;//向某个父元素添加子节点。
alert(container.innerHTML);//还可以读取该父元素的所有子节点,包括HTML标签
});
</script>

-------使用innerHTML的限制-------
一,
使用innerHTML的限制:
一,以下var str 前面的空格不同浏览器显示不一样:是指在审查元素结构中的表现
1,chrome opera浏览器会保留前面两个空格。
2,所有IE浏览器,包括EDGE,firefox浏览器会清除前面两个空格。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var container=document.getElementById('container');
var str=" This is my mom. You are my sumlime";
container.innerHTML=str;
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

还是上面的代码如下修改:
以下是给IE 8以及IE 8以下的浏览器创建兼容script脚本,并且执行。但,其他浏览器默认是不会执行该脚本的。
1,IE 8 以及IE 8以下都不会在文档中创建 script 标签,其他浏览器都会在文档中创建该标签,且不会执行该脚本。
2,IE 8 添加其他两个条件是可以创建script标签,并且可以执行该脚本的。
a,为script标签添加 defer 属性。
b,script必须在有作用域的元素之后,可以是一个下划线(文本节点都行,最佳:是使用输入框,将其隐藏。)。微软默认script,style是无作用域的元素,即在页面中是看不到的元素。
修改上面代码如下:
var str="<input type=\"hidden\"><script defer> alert('不同浏览器表现不同!');<\/script>";
container.innerHTML=str;
container.removeChild(container.firstChild);

以下是给IE 8以及IE 8以下的浏览器创建兼容style样式。不会影响其他浏览器
var str="_<style type=\"text\/css\"> body{background:red;} <\/style>";
1,因为style是一个无作用域的标签,在页面中看不到的,所以必须在之前创建一个有作用域的节点。
可以是任何一个文本节点(下划线,文字,符号)。
2,也可以使用文本框,设置属性隐藏起来。如:
var str="<input type=\"hidden\"> <style type=\"text\//css\"> body{background:red;} <\/style>";
下面的container.removerChild(container.firstChild); 删除了。因为上面我们已经隐藏了,不需要删除。

这里还涉及另外一个知识点:转义字符 : 反斜杠 \
如果要把 双引号 斜杆 表现成字符串,那么必须在前面添加反斜杠 \
如:
var str="<input type=\"hidden\"> <script type=\"text/javascript\"> alert('You are my sumshime!')<\/script>"

总结:
var div=document.getElementById("container");
div.innerHTML:所指的范围是div的标签之内,没有包括div本身标签。所以是该标签的内容被覆盖。
div.outerHTML:所指的范围是包括div对象本身。div.outerHTML="<p>包括div本身,全部被替换!</p>"

-------使用innerText设置指定对象的文本节点-------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var container=document.getElementById('container');//获取对象
console.log(container.textContent);//所有的文本内容都会被拼接起来(不包括标签)。并输出控制台。
console.log(container);//在控制台输出对象就可以查看对象的各种属性,如上:textContent属性。
container.textContent="<p>You are my sumshime!</p>";//这里的p标签会被当做是文本内容,而不是文本节点。
});
</script>
</head>
<body>
<div id="container">我爱你
<ul>
<li>我爱你</li>
<li>我爱你</li>
</ul>
</div>
</body>
</html>
-------其他浏览器支持innerText,firefox支持textContent-------
-------上面只需要把innerText换成textContent火狐即可支持-------
console.log(container.innerText);//所有的文本内容都会被拼接起来。
显示如下:
我爱你
我爱你
我爱你

container.innerText="<p>You are my sumshime!</p>";
//这里的p标签会被当做是文本节点,而不是HTML标签节点。审查元素结构显示如下:
<div id="container">&lt;p&gt;You are my sumshime!&lt;/p&gt;</div>
文本显示:<p>You are my sumshime!</p> 这里的是文本节点,不是HTML标签节点。
-----------------

以下是兼容所有浏览器,html元素获取内容和设置内容的通用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var container=document.getElementById('container');//获取对象
/**
* 兼容所有浏览器获取对象内容
* @param {object} element 获取内容的对象
* @return {对象的属性} 对象的文本内容
*/
function getInnerText(element){
return typeof (element.textContent == "string") ? element.textContent : element.innerText;
}

/**
* 兼容所有浏览器设置对象的内容
* @param {object} element 需要设置内容的对象
* @param {字符串} text 文本内容
*/
function setInnerText(element,text){
if (typeof element.textContent == "string") {
element.textContent=text;
}else{
element.innerText=text;
}
}
console.log(getInnerText(container));
setInnerText(container,"hello world!");//设置container的文本内容,覆盖之前的所有内容。
});
</script>
</head>
<body>
<div id="container">我爱你
<ul>
<li>我爱你</li>
<li>我爱你</li>
</ul>
</div>
</body>
</html>

--------------------

container.outerText="<p> you are my sumshime!";//用于覆盖整个对象及其内容,不支持火狐浏览器,一般不怎么使用,了解即可。

经测试:container.innerText="You are my sumshime!";只有 IE 5 7 8不支持。其他浏览器最新版本都支持,旧的版本就有可能不支持了,所以还是建议使用兼容性方法。
是否支持是这样的。
var container=document.getElementById("container");//获得标签对象。
container.innerText=="You are my sumshime!"; 如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
container.textContent=="You are my sumshime!"; 如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
所以这里可以使用:
typeof(container.innerText=="string") 支持:返回string类型,不支持返回:undefined.
typeof(container.textContent=="string") 支持:返回string类型,不支持返回:undefined.

可以封装成一个函数:
/**
* 获取对象里面的内容
* @param {object} element html标签对象
* @return {string} 标签里面的内容
*/
function getInnerText(element){
return container.innerText=="string"?container.innerText:container.textContent;
}

/**
* 设置标签对象里面的内容
* @param {object} element 需要要设置内容的标签
* @param {string} text 标签里面的内容
*/
function setTextContent(element,text){
return container.innerText=="string"?container.innerText=text:container.textContent=text;
}

===================

-------使用outerHTML创建节点-------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
var container=document.getElementById('container');//获取对象
console.log(container.outerHTML);//在浏览器输出当前container的outerHTML文档结构
container.outerHTML="<p>You are my sumshime!</p>";//会覆盖整个container文档结构以及里面的所有内容。
});
</script>
</head>
<body>
<div id="container">
<ul>
<li>我爱你</li>
<li>我爱你</li>
</ul>
</div>
</body>
</html>

var container=document.getElementById('container');//获取对象
console.log(container.outerHTML);//在浏览器输出当前container的outerHTML文档结构
//控制台显示如下:
<div id="container">
<ul>
<li>我爱你</li>
<li>我爱你</li>
</ul>
</div>

var container=document.getElementById('container');//获取对象
container.outerHTML="<p>You are my sumshime!</p>";//会覆盖整个container文档结构以及里面的所有内容。
当执行完这句话后,审查元素:
<body>
<p>You are my sumshime!</p>
</body>

总结:
var div=document.getElementById("container");
div.innerHTML:所指的范围是div的标签之内,没有包括标签。
div.outerHTML:所指的范围是包括div对象本身。div.outerHTML="<p>包括div本身,全部被替换!</p>"

-------使用outerText设置指定对象的文本节点-------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
/*******outerText,IE5 7 8 都支持,就是不支持firefox*********/
var container=document.getElementById('container');
/**
* 获取对象以及对象里面的所有内容
* @param {html对象} element html标签
* @return {string} 对象以及对象里面的所有内容
*/
function getOuterText(element){
return element.outerText;
}

/**
* 覆盖整个对象以及里面所有内容
* @param {html对象} element html标签
* @param {string} text 覆盖对象的内容
*/
function setOuterText(element,text){
return element.outerText=text;
}
alert(getOuterText(container));
alert(setOuterText(container,"You are my sumshime!"));
})
</script>
</head>
<body>
<div id="container">我爱你
<ul>
<li>我爱你</li>
<li>我爱你</li>
</ul>
</div>
</body>
</html>
=======================================================

创建节点--DOM树的更多相关文章

  1. Webkit初始化以及载入URL过程中各种对象的建立时序以及DOM树的建立详情分析

            众所周知,Webkit须要创建DOM树. 为此它须要创建WebView, Chrome,Page,Frame, Document. Document Parser, DOM Tree ...

  2. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  3. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  4. 【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

    使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我 ...

  5. dom操作------创建节点/插入节点

    <section> <div id="box" style="position: relative;"> <p id=" ...

  6. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  7. DOM创建节点

    1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...

  8. DOM树节点关系

    DOM是JS中专门操作HTML页面内容的 他的三种基本使用方法是: 1.  document.getElementById(''):  ——>选取html页面中带有Id的属性名: 2.docum ...

  9. 数据结构——创建链表或树节点的小trick(哑结点)

    一般创建链表时,我们可以创建一个哑结点,来保存头部  * struct ListNode {  *     int val;  *     ListNode *next;  *     ListNod ...

随机推荐

  1. Hanlp-地名识别调试方法详解

    HanLP收词特别是实体比较多,因此特别容易造成误识别.下边举几个地名误识别的例子,需要指出的是,后边的机构名识别也以地名识别为基础,因此,如果地名识别不准确,也会导致机构名识别不准确. 类型1 数字 ...

  2. IDEA插件之JavaDoc

      作用:用于在Java类元素(例如字段,方法等)上生成Java文档的插件.   1.安装JavaDoc插件 File -> Settings -> Plugins -> Marke ...

  3. 数据结构 -- 队列Queue

    一.队列简介 定义 队列(queue)在计算机科学中,是一种先进先出的线性表. 它只允许在表的前端进行删除操作,而在表的后端进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有 ...

  4. (十四)mybatis 和 spring 整合

    目录 整合思想 整合步骤 整合之后原始 dao 开发 整合之后 Mapper 代理开发 总结 整合思想 让 spring 管理 sqlSessionFactory ,使用 单例模式 创建该对象 : 根 ...

  5. redis集群搭建及一些问题

    redis 1.简化版redis (本套Redis集群为简化版安装部署,只需解压至普通用户家目录下或者任意目录,解压后修改脚本,执行脚本后即可使用.) 注意,此版本需要在redis配置文件中添加 pr ...

  6. 怎么保证 redis 和 db 中的数据一致

    你只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 首先需要考虑到:更新数据库或者更新缓存都有可能失败,在这种前提下分析业务带来的 ...

  7. linux下的终端利器 tmux 安装以及使用

    ref :https://www.jianshu.com/p/fd3bbdba9dc9 Introduction 为什么使用tmux? 因为如果我们用terminal连接remote server.发 ...

  8. js 怎样判断用户是否在浏览当前页面

    有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态.然后再进行相关的操作.浏览器中可通过window对象的onblur.onfocus判断,或者document的hidd ...

  9. git bash配置SSH远程连接阿里云ECS

    1.连接配置 1-1.添加安全组规则 1-2.使用GitHub的话本地都会有id_rsa.pub(公钥),id_rsa(私钥),一般保存在C盘用户目录下.ssh文件夹. 把公钥内容复制下来(ssh-r ...

  10. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...