首页 > 代码库 > 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