奥门巴黎人手机网址【app】

科技世界:深刻领悟javascript动态插入技能

2019-09-18 09:51·澳门巴黎人赌场官网

function prependChild(o,s){
if(s.hasChildNodes()){
s.insertBefore(o,s.firstChild);
}else{
s.appendChild(o);
}
}
function insertAfert(o,s){
if(s.nextSibling!=null){
s.parentNode.insertBefore(o,s.nextSibling);
}else{
s.parentNode.appendChild(o);
}
}

您也许感兴趣的稿子:

  • JavaScript之appendChild、insertBefore和insertAfter使用表达
  • js在钦赐地点扩充节点函数insertBefore()用法实例
  • js动态拉长表格数据利用insertRow和insertCell完结
  • js AppendChild与insertBefore用法详细比较
  • js中AppendChild与insertBefore的用法详细分析
  • 初学js插入节点appendChild insertBefore使用办法
  • js利用Array.splice实现Array的insert/remove
  • javascript insertAfter()定义与用法示例

六.转移文书档案的档次结构
15.document.createElement()方法创设成分结点
--如:document.createElement("Span");
16.document.createTextNode()方法制造文本结点
--如:document.createTextNode(" "); //注:他不会经过html编码,也正是说这里开创的不是空格,而是字符串 
17.选取appendChild()方法增添结点
--parentElement.appendChild(childElement);
18.应用insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode为插入的节点,referenceNode为将插入的节点插入到那后面
19.采用replaceChild方法代替子结点
--parentNode.replaceChild(newNode,oldNode);
--注:oldNode必需是parentNode的子结点,
20.利用cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool,表示是还是不是复制其子结点
21.选择removeChild方法删除子结点
--parentNode.removeChild(childNode);
七.表格的操作
--注:ie中无法间接将一个一体化的报表结点插入到文书档案中
22.增加行和单元格
var _table=document.createElement("table"); //创建表
table.insertRow(i); //在table的第i行插入行
row.insertCell(i); //在row的第i个岗位插入单元格
23.援引单元格对象
--table.rows[i].cells[i];
24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);
25.调换两行获得四个单元格的职位
node1.swapNode(node2);
--那一个办法在firefox师长出错
通用方法:

        tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
        [ 1, "<table>", "</table>" ] ||

以下是上下一心写的贰个进行函数,固然网晚春经有了,仅看成自个儿练兵。。。

//DOM未有提供insertAfter()方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 倘若最终的节点是目的元素,则直接抬高。因为暗中认可是最后
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
//假设不是,则插入在指标成分的下三个弟兄节点 的前头。也等于指标成分的末尾
}
}

复制代码 代码如下:

  });

你或然感兴趣的篇章:

  • javascript dom操作之cloneNode文本节点克隆使用本领
  • javascript DOM操作之动态删除TABLE多行
  • js使用DOM操作完毕轻巧留言板的格局
  • javascript中HTMLDOM操作详解
  • 不难完结JS对dom操作封装
  • JavaScript DOM操作表格及体制
  • 轻巧通晓JavaScript中的Math object数学对象
  • JavaScript中的数学生运动算介绍
  • js四舍五入数学函数round使用实例
  • JS数学函数Exp使用表达
  • Javascript中的数学函数会集
  • JavaScript基于DOM操作达成轻易的数学生运动算功用示例

jQuery 文书档案操作 - insertAfter() 方法

function swapNode(node1,node2)
{
var _parent=node1.parentNode;
var _t1=node1.nextSubling;
var _t2=node2.nextSubling;
if(_t1)parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
if(_t2)parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>
            IE的innerHTML By 司徒正美
        </title>
        <script type="text/javascript">
            window.onload = function() {
                var div = document.createElement("div");
                div.innerHTML = "   <td>    <b>司徒</b>正美         </td>        "
                alert("|" + div.innerHTML + "|");
                var c = div.childNodes;
                alert("生成的节点个数  " + c.length);
                for(var i=0,n=c.length;i<n;i++){
                      alert(c[i].nodeType);
                      if(c[i].nodeType === 1){
                          alert(":: "+c[i].childNodes.length);
                      }
                }       
            }
        </script>
    </head>

复制代码 代码如下:

复制代码 代码如下:

function cleanWhitespace(element)
{
for(var i=0; i<element.childNodes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}

  // If a single string is passed in and it's a single tag
  // just do a createElement and skip the rest
  //假设文书档案对象里面唯有叁个标签,如<div>
  //大家大致只怕是在外围那样调用它$(this).append("<div>")
  //那时就一贯把它当中的因素名收取来,用document.createElement("div")创设后放进数组重回
  if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
    var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
    if ( match )
      return [ context.createElement( match[1] ) ];
  }
  //利用四个div的innerHTML创造众节点
  var ret = [], scripts = [], div = context.createElement("div");
  //假设我们是在外头那样增加$(this).append("<td>表格1</td>","<td>表格1</td>","<td>表格1</td>")
  //jQuery.each按它的第八种支分情势(未有参数,有length)遍历aguments对象,callback.call( value, i, value )
  jQuery.each(elems, function(i, elem){//i为索引,elem为arguments对象里的要素
    if ( typeof elem === "number" )
      elem += '';

复制代码 代码如下:

它们中间都以调用了三个静态方法,batch与insert。由于dom对象是类数组对象,作者参谋jQuery那样为它完成了多少个相当重要迭代器,forEach、map与filter等。三个dom对象包蕴复数个DOM成分,大家就能够用forEach遍历它们,推行在那之中的回调方法。

var td= document.getElementById("TEST");
alert(td.childNodes.length);结果为4

jQuery.each({
    appendTo: "append",
    prependTo: "prepend",
    insertBefore: "before",
    insertAfter: "after",
    replaceAll: "replaceWith"
}, function(name, original){
    jQuery.fn[ name ] = function( selector ) {//插入物(html,成分节点,jQuery对象)
        var ret = [], insert = jQuery( selector );//将插入转变为jQuery对象
        for ( var i = 0, l = insert.length; i < l; i++ ) {
            var elems = (i > 0 ? this.clone(true) : this).get();
            jQuery.fn[ original ].apply( jQuery(insert[i]), elems );//调用四个已落实的插入方法
            ret = ret.concat( elems );
        }
        return this.pushStack( ret, name, selector );//由于未有把链式操作的代码分离出来,供给活动达成
    };
});

百思不得其解,阅读有关资料后,开掘原先JS中,空格也是用作一个文本节点,而七个input成分前边都有空格
之所以都看作四个文件节点,所以结果为4
剔除空格后结果为2
为了管理之中的空格节点,用以下函数来管理

        [ 0, "", "" ];

复制代码 代码如下:

    if ( first )
      for ( var i = 0, l = this.length; i < l; i++ )
        callback.call( root(this[i], first), this.length > 1 || i > 0 ?
      fragment.cloneNode(true) : fragment );

复制代码 代码如下:

dom.each({
    appendTo: 'append',
    prependTo: 'prepend',
    insertBefore: 'before',
    insertAfter: 'after'
},function(method,name){
    dom.prototype[name] = function(stuff){
        return dom(stuff)[method](this);
    };
});

管理结点cleanWhitespace(document.getElementById("TEST"))后,OK,消除
另附:
DOM基本措施
一.直接援引结点
1.document.getElementById(id);
--在文书档案里面通过id来找结点
2.document.getElementByTagName(tagName);
--重临三个数组,包含对这么些结点的援用
--如:document.getElementByTagName("span");将再次来到全部项目为span的结点
二.直接援引结点
3.element.childNodes
--再次回到element的全数子结点,能够用element.childNodes[i]的章程来调用
--element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--引用父结点
5.element.nextSibling; //引用下二个小伙子结点
element.previousSibling; //引用上八个兄弟结点
三.得到结点消息
6.nodeName属性得到结点名称
--对于成分结点重临的是标识名称,如:<a herf><a>重回的是"a"
--对于属性结点重返的是性质名称,如:class="test" 再次回到的是test
--对于文本结点重临的是文本的剧情
7.nodeType回去结点的类型
--成分结点再次回到1
--属性结点重返2
--文本结点重回3
8.nodeValue再次回到结点的值
--成分结点再次回到null
--属性结点重回undefined
--文本结点重回文本内容
9.hasChildNodes()判别是或不是有子结点
10.tagName属性再次回到成分的标识名称
--那么些本性只有成分结点才有,等同于成分结点的nodeName属性
四.甩卖属性结点
11.每一个属性结点都是因素结点的一个属性,能够透过(成分结点.属性名称)访谈
12.施用setAttribute()方法给成分结点增添属性
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName为属性的称呼,attributeValue为属性的值
13.使用getAttribute()方法赢得属性值
--elementNode.getAttribute(attributeName);
五.拍卖公事结点
14.innerHTML和innerText属性,那三个艺术相信大家都很熟练,不介绍了,值得注意的是随意ie如故firefox都轻松把空格、换行、制表符等当成文本结点。全部一般通过element.childNodes[i]援引文本结点的时候,一般要拍卖:

复制代码 代码如下:

你只怕感兴趣的作品:

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • D3.js完结柱状图的措施详解
  • JavaScript根据数量生成都百货分比图和柱状图的实例代码
  • Javascript实时柱状图完结代码
  • 选择D3.js完毕最简易的柱状图示例代码
  • angularjs达成柱状图动态加载的亲自去做
  • 详解JS获取HTML DOM元素的8种方法
  • javascript转变字符串为dom对象(字符串动态创设dom)
  • html+js+highcharts绘制圆饼图表的归纳实例
  • jquery.flot.js轻松绘制折线图用法示例
  • JavaScript落到实处的DOM绘制柱状图效果示例

复制代码 代码如下:

<table>
<tr>
<td id="TEST">
<input type="submit" value="确定">
<input type="button" value="取消">
</td>
</tr>
</table>

    if ( !elem )
      return;

差不离的报表:

      }

复制代码 代码如下:

复制代码 代码如下:

经测试:

另三个讨厌的地点是,在IE中以下因素的innerHTML是只读的:col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr。为了惩罚它们,Ext特意弄了个insertIntoTable。insertIntoTable就是利用DOM的insertBefore与appendChild来增添,意况基本同jQuery。可是jQuery是一丝一毫依赖那多少个法子,Ext还动用了insertAdjacentHTML。为了升高成效,全体类库都一模一样地采纳了文档碎片。基本流程都以通过div.innerHTML提收取节点,然后转移到文档碎片上,然后用insertBefore与appendChild插入节点。对于火狐,Ext还选拔了createContextualFragment深入分析文本,直接插入其指标地点上。鲜明,Ext的比jQuery是快比较多的。可是jQuery的插入的不单是HTML片断,还应该有种种节点与jQuery对象。下边重温一下jQuery的职业流程吧。

<script language"javaScript" type="text/javascript">
function cleanWhitespace(element)
{
for(var i=0; i<element.childNotes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
</script>

  return ret;
},

    if ( elem.nodeType )
      ret.push( elem );
    else
    //全并五个数组,merge方法会管理IE下object成分下未有了的param元素
      ret = jQuery.merge( ret, elem );

append: function() {
  //传入arguments对象,true为要对表格进行特别管理,回调函数
  return this.domManip(arguments, true, function(elem){
    if (this.nodeType == 1)
      this.appendChild( elem );
  });
},
domManip: function( args, table, callback ) {
  if ( this[0] ) {//假使存在成分节点
    var fragment = (this[0].ownerDocument || this[0]).createDocumentFragment(),
    //注意这里是流传五个参数
    scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), fragment ),
    first = fragment.firstChild;