javascript和jQurey增删元素

javascript添加删除元素

DOM添加元素
首先你得先创建一个元素。
添加内容可以用innerHTML也可以用document.createTextNode。
可以给创建好的元素添加事件。
用appendChild追加元素和内容。
调用appendChild的是等待被追加的元素。
appenChild方法里面传的参数是追加的元素。

<body><div id="oDiv"></div><script>var oDiv = document.getElementById("oDiv");var p = document.createElement("p"); //创建元素//p.innerHTML = "内容";  //使用innerHTML创建内容  就不需要使用appendChild追加进去了p.onclick = function(){this.style.background = "red"; //给创建的元素添加事件}var text = document.createTextNode("内容");p.appendChild(text);  //向新创建的元素p追加创建好的内容oDiv.appendChild(p);  //向div添加元素p</script>
</body>

DOM删除元素
javascript删除元素使用的是removeChild()。
但是不能对自己使用removeChild()，对自己使用会报错。
如果想对自己使用只能使用parentNode属性找到父元素然后再调用removeChild()方法删除自己，也就是说只能通过父级来删除。

<div id="oDiv"><span id="oSpan">内容</span></div><script>var oDiv = document.getElementById("oDiv");var oSpan = document.getElementById("oSpan");// oSpan.removeChild(oSpan);  //会报错// oSpan.parentNode.removeChild(oSpan);  //找到父元素再对自己删除  可行oDiv.removeChild(oSpan);   </script>

jQurey添加删除元素

jqurey添加元素
使用$可以直接创建元素，括号里面要写元素，如果直接写标签p或者其他，jQurey会认为是个选择器。
可以给p添加点击事件。
添加元素使用append()，appendTo()，prepend()和prependTo()。
append()和appendTo()是将元素添加到后面，prepend()和prependTo()添加到前面。
append()和prepend()里面传的是添加的元素。
appendTo()和prependTo()里面传的是等待被添加的元素。
注：我只试了一种，其他的要是感兴趣可以自己试。添加元素的方法可能不止这些，但这几种是应该是常用的。

<body><div id="oDiv"></div><script src="../js/jquery-1.11.3.js"></script><script>var p = $("<p>内容</p>");p.click(function(){$(this).css("background","red");})// $("#oDiv").append(p);p.appendTo($("#oDiv"));</script>
</body>

jqurey删除元素
直接获取想要删除的元素使用remove()方法即可。

$("p").remove();  //删除p元素