利用JavaScript添加元素和更改元素属性的方法

创建并添加元素节点和文本节点

document.createElement("p");
该句代码会在DOM中创建一个

标签，但是该标签不在DOM树结构中，为使其真正依附于DOM中应使用appendChild方法：
parentNode.appendChild(childNode);
同样的我们应为该

标签添加文本元素，而文本元素也需要进行创建：
document.createTextNode("context");
所以当我们需要通过JavaScript为页面上一个空div元素中添加一段文本时我们的代码应该是这样的
在原始的html文件中存在一个空的div元素：

    ...


    

在对应的js文件中：

var para = document.createElement("p");
var txt = document.createTextNode("Hello World");
para.appendChild(txt);
var divt = document.getElementsByClassName("pt_div");
divt[0].appendChild(para);

当js文件得到加载运行后，页面将显示Hello World这一串文本。

添加元素的其他方法

1.在已有的元素前面插入一个新元素 insertBefore()
调用的语法：
parentElement.insertBefore(newElement,targetElement);
依次表示父元素、新元素、目标元素（你想把新元素插入到哪个元素之前）。
2.在已有的元素后面插入一个新元素 并没有 insertAfter() 这个方法！！！
但是我们可以手撸一个insertAfter()函数啊！

function insertAfter(newElement,targerElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

只是简单的想法就可以自己实现的东西，但是看起来没有什么太大的意义。

更改元素CSS样式

查阅相关资料得出的方法自己在此主要记一种常用方法：
-.element.style.attribute = 'value';
若在css中存在-改为驼峰形式
div_test.style.marginTop = '10px';

后记

因为是初学所以记到这里产生了困惑，感觉很多时候这些工作都可以通过css来完成，所以在可以通过css单独就可以实现效果的时候是否还需要js来辅助呢？