javaScript动态修改添加元素及设置元素属性

阅读更多

        我们都知道网页的组成，其实就是好多标签有序有目的的组成的，那么我们如何动态的添加元素并且设置他的属性，我们可以用js来实现。

       在这之前需要了解几个概念（w3c的定义）：

       节点：

        在HTML DOM（文档对象模型）中，每个部分都是节点：

                文档本身是文档节点

                所有HTML元素是元素节点

                所有HTML属性是属性节点

                HTML元素内的文本是文本节点

                注释是注释节点

       Element对象;

                在HTML中，Element对象表示HTML元素。

                Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点

                NodeList对象表示节点列表，比如HTML元素的节点集合

                元素可以拥有属性，属性是属性节点

好了，现在开始创建元素了

这是一段html代码的body部分：

 

      如果要添加一个元素，必须先创建该元素也就是先创建一个节点，然后向某个已存在的元素添加

                创建新的元素

var  p = document.creatElement("p") 

                 将p元素添加到div中

//我们首先取到div元素
var element = document.getElementById("div1")
//添加
div.appendChild(p)

               如果想要添加一些内容到p元素里，我们同样要创建

      

var node=document.createTextNode("这是要添加的内容。")

             添加

p.appendChild(node);

 下面就是创建好的代码：

这是要添加的内容

 这个时候你会有疑问了，如果要添加一个是挺方便的，如果特别多了，那我们岂不是会疯掉的，嘿嘿，下面来看一个属性 innerHtml

我们只需要获取元素和上面一个步骤

var element = document.getElementById("div1")

 

然后

element.innerHTML="
"+"这是要添加的内容"+"
"

 

嘿嘿，是不是要更方便呢，再也不用去创建那么多节点了

然后你可能又会有疑问了，那么他的css样式怎么设置，嘻嘻，你猜对了，直接加上就好了

element.innerHTML="
"+"这是要添加的内容"+"
"

 。。待续