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

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

<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