利用JavaScript添加元素和更改元素属性的方法
2017-03-28 本文已影响0人
Alander
创建并添加元素节点和文本节点
document.createElement("p");
该句代码会在DOM中创建一个<p>标签，但是该标签不在DOM树结构中，为使其真正依附于DOM中应使用appendChild方法：
parentNode.appendChild(childNode);
同样的我们应为该<p>标签添加文本元素，而文本元素也需要进行创建：
document.createTextNode("context");
所以当我们需要通过JavaScript为页面上一个空div元素中添加一段文本时我们的代码应该是这样的
在原始的html文件中存在一个空的div元素：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="pt_div"></div>
</body>
<script type="text/javascript" src=".../nodeTest.js"></script>
</html>
在对应的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来辅助呢？
