创建节点
快捷键：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"><p>You are my sumshime!</p></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>=======================================================