首页 > 代码库 > 1.javaScript(JS)常用函数之 appendChild 和removeChild

1.javaScript(JS)常用函数之 appendChild 和removeChild

2024-07-20 03:41:41   224人阅读

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">1，追加与删除HTML元素</span>

         创建HTML元素

           var newEle =document.createElement("p");

       创建的元素追加到别的元素之后：

       A. appendChild(B)： 若B是新建的元素，在A元素的所有子元素的末尾增加元素B 。

若B页面中已存在的元素，则这句语句产生的效果是将B元素移动到了A的子元素中。

appendChild（）这个函数和innerHTML这个属性的效果差不多，区别在：1 innerHTML运行效果会比appendChild慢（也许是需要解析的原因） 2 innerHTML比appendChild要方便些，像写字符串似的。


还有另外两个元素：

    append() 和appendTo()这两个函数呢是jquery的函数。使用模式为：

append()前面是要选择的对象，后面是要在对象内插入的元素内容。
appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象。

实例：
$(‘#a‘).append(‘content‘);
$(‘content‘).appendTo($(‘#a‘));

注意：append,appendTo前面一定要是jquery对象。

自己写了个例子：

<pre name="code" class="javascript"><script type="text/javascript">
$(document).ready(function(){
	var t=document.getElementById("mydiv");
	var s=document.createElement("p");
	s.innerHTML="woemnsss";
	$(s).appendTo(t); //这句可用另外两种方法代替
	//<span style="font-family: Arial, Helvetica, sans-serif;">t.appendChild(s); </span><pre name="code" class="javascript" style="font-size: 24px;"> <span style="font-family:Arial, Helvetica, sans-serif;">           //  $(t).append(s);</span>
});</script>



$(s).appendTo(t)可用   <span style="font-family: Arial, Helvetica, sans-serif;">t.appendChild(s); 和</span><span style="font-family: Arial, Helvetica, sans-serif;">$(t).append(s); 替换，产生一样的效果。</span>
<span style="font-family: Arial, Helvetica, sans-serif;">另外：</span><span style="font-family: Arial, Helvetica, sans-serif;">$(s).appendTo(t)</span><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="javascript" style="font-size: 24px;"><pre name="code" class="javascript" style="font-size: 24px;"><span style="font-family: Arial, Helvetica, sans-serif;">         $(t).append(s); 写成如下方式也可以：</span>
<span style="font-family: Arial, Helvetica, sans-serif;">        $(t).append($(s));<span style="white-space:pre">	</span>$(s).appendTo($(t));</span>
<span style="font-family: Arial, Helvetica, sans-serif;"></span>
2removeChild()
    这个函数是得到元素的父元素，进行删除的。语法形式为：parent.removeChild(child);
    有时候我们希望在不涉及父元素的情况下进行删除。但是DOM 就是这个机制，必须明确元素和父元素才能进行删除。在进的到要删除的元素时，我们也是可以进行删除操作的，利用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
 
注意：jquery也有功能与removeChild相对应的函数：remove（）和empty（）
remove（）：是指将自己本身和子元素均删除
empty（）：是删除子元素

1.javaScript(JS)常用函数之 appendChild 和removeChild






























        

            
                
                  
                
                

                    联系

                    我们