用JS怎么控制添加或删除DIV？

documentcreateElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
1、添加DIV
function addDiv(w,h){
//如果原来有“divCell”这个图层，先删除这个图层
deleteDiv();
//创建一个div
var newdiv = documentcreateElement("divCell");
//添加到页面
documentbodyappendChild(newdiv);
//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
newdivstyleposition="absolute";
//通过样式指定x坐标(随机数0~450)
newdivstyletop= Mathround(Mathrandom()450);
//通过样式指定y坐标(随机数0~700)
newdivstyleleft= Mathround(Mathrandom()700);
//通过样式指定宽度
newdivstylewidth=w;
//通过样式指定高度
newdivstyleheight=h;
//通过样式指定背景颜色,,若是背景 例为 newdivstylebackgroundImage="url(img/3jpg)"
newdivstylebackgroundColor="#ffffcc";
//添加div的内容
//newdivinnerHTML=i++;
//设置样式透明
newdivstylefilter = "alpha(opacity=50)";
//设置ID
newdivid = "divCell";
}
2、删除DIV
function deleteDiv()
{
var my = documentgetElementById("divCell");
if (my != null)
myparentNoderemoveChild(my);
}

var table_head = $("#head_table")html();

var strBodyStyle = "<style>table { border: 1 solid #000000;border-collapse:collapse;font-size:12px }</style>";

var strFormHtml = documentgetElementById("div1");

strFormHtmlappend(table_head);

strFormHtml += strBodyStyle;

扩展资料：

 

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

1$("p")

在页面中选取所有 <p> 元素

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

1$("#test")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

1$("test")

1、新建一个HTML文件，保存为testhtml，用于编写代码实现拖放功能 。

2、在testhtml添加一个div标签，并且给它一个id，用于下面编写样式。

3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将拖放在这个长方形中。

4、在div的下面定义一张被拖放，并设置该的属性为允许被拖放。

5、在被拖放的上加上一个ondragstart事件，即被拖动时触发这个事件。再给事件一个函数，用于拖动时，把保存在一个变量中。

6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放到div中的功能。

用JS给div添加样式是通过js *** 作css来实现的。

用js方法找到div的dom对象

通过js *** 作css的style属性来改变div的样式

具体举例如下：

定义div:<div id="myDiv" style="color:red">改变样式测试</div>

编写js代码：

var color = documentgetElementById("myDiv")stylecolor;

if (color == "red")

 documentgetElementById("myDiv")stylecolor="black";

else

 documentgetElementById("myDiv")stylecolor="red";

执行js代码后，div原来是红色会变成黑色，原来是别的颜色会变成红色

//1、首先获取div的父节点
//2、创建一个新节点
//3、将新节点添加到div节点后面
//具体 *** 作如下：
var divs = documentgetElementsByTagName("DIV");//获取页面中所有div
for(var i=0; i<divslength; i++) {  
    var div = divs[i];//获取第i个div
    var divParent = divparentNode;//获取该div的父节点
    var newNode = documentcreateTextNode("文本节点");//创建文本节点
    var next = divnextSibling;//获取div的下一个兄弟节点
    //判断兄弟节点是否存在
    if(next) {
        //存在则将新节点插入到div的下一个兄弟节点之前，即div之后
        divParentinsertBefore(newNode,next);
    } else {
        //不存在则直接添加到最后,appendChild默认添加到divParent的最后
        divParentappendChild(newNode);
    }
}
//以下是一些常用js *** 作
var textNode = documentcreateTextNode("xxx");//创建文本节点
var elementNode = documentcreateElement("p");//创建元素节点(p)
var body = documentgetElementsByTagName("body")[0];//获取body节点
bodyappendChild(elementNode);//元素节点添加到body节点下，添加在末尾
elementNodeappendChild(textNode);//将文件节点添加到元素节点下
//获取要删除的节点，elementNodelength-1 表示最后一个指定节点(这里表示最后一个p节点)
var delElementNode = elementNodeitem(elementNodelength-1);
bodyremoveChild(delElementNode)；//移除指定节点
bodyinsertBefore(newNode, oldNode);//在body中的oldNode前插入newNode节点
bodyreplaceChild(newNode, oldNode);//将body中的oldNode替换为newNode节点
//创建一个新的属性
var style = documentcreateAttribute("style");
//为节点添加新属性
optionattributessetNamedItem(style);
//设置新属性的值
optionsetAttribute("style","color:red");

把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：
var div = documentcreateElement('div'); // 新增元素
var diva = documentgetElementById('a'); // 获取id为a的元素divaparentNodeinsertBefore(div, diva); // 在这个元素前面增加上去

 <script type="text/javascript" language="javascript">
        var num = 0;
        function addContent(strParent, strTemplate) {
            num = parseInt(num) + 1;
            var div_parent = documentgetElementById(strParent);
            var div_template = documentgetElementById(strTemplate);
            var div_temp = div_templatecloneNode(1);
            var div_Name = documentgetElementById("div1");
            for (i = 0; i < div_tempchildNodeslength; i++) {
                if (div_tempchildNodes[i]tagName == "INPUT") {
                    //if (div_tempchildNodes[i]name == "Des") {
                    div_tempchildNodes[i]id = div_tempchildNodes[i]id + num;
                    //}
                    div_tempchildNodes[i]value = "";
                    div_tempchildNodes[i]readOnly = false;
                }
                else if (div_tempchildNodes[i]tagName == "DIV" && div_tempchildNodes[i]id == "div1") {
                    for (j = 0; j < div_tempchildNodes[i]childNodeslength; j++) {
                        if (div_tempchildNodes[i]childNodes[j]tagName == "INPUT") {
                            //if (div_tempchildNodes[i]childNodes[j]name == "Name") {
                            div_tempchildNodes[i]childNodes[j]id = "Name" + num;
                            //}
                            div_tempchildNodes[i]childNodes[j]value = "";
                            div_tempchildNodes[i]childNodes[j]readOnly = false;
                        }
                    }
                }
            }
            div_tempid = "tmp_add" + num;
            div_tempgetElementsByTagName('div')[0]id = div_tempgetElementsByTagName('div')[0]id + num;
            div_tempstyledisplay = "";
            var btn = documentcreateElement("<input type=\"button\" value=\"删除\" onclick=\"removeContent(this);\">");
            div_tempappendChild(btn);
            div_parentappendChild(div_temp);
        }
  
       function removeContent(obj) {
            var div_parent = objparentNodeparentNode;
            var div_temp = objparentNode;
            div_parentremoveChild(div_temp);
        }

给你优化了下,试试看吧!

---