增:
(并没有增加到页面上!!)
document.createElement(); //创建元素节点 (标签)
<script type="text/javascript">
var div=document.createElement('div'); //添加一个div标签
//创建后被JS攥在手里 并没有被扔到页面里面
</script>
我们来看一下,给它加内容“hello world”,控制台上可以显示标签的内部出现了这段内容,可是页面上没有显示任何内容
document.body.appendChild(div)
(将 div 扔在 body 中,div中添加的内容可以在页面中显示。)
- document.createTextNode(); //创建文本节点
<script type="text/javascript">
var text=document.createTextNode('hello world');
</script>
- document.createComment(); //创建注释节点
- document.createDocumentFragment();
插入:
标签.appendChild(); //插入到页面中
div.appendChild(span); //将span 插入到div 里面 遵循先后顺序(剪切插入)
<div></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0]; //获取标签
var text=document.createTextNode('hello'); //创建文本节点
var span=document.createElement('span'); //创建元素节点
div.appendChild(text); //将text 文本添加到 div标签中
div.appendChild(span); //将span 元素添加到 div标签中
//span标签在上一个创建的text文本下面
var text1=document.createTextNode('world');
span.appendChild(text1);
</script>
我们来看一个小例子:
<div></div>
<span></span>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0]; //获取一个div 元素
var span=document.getElementsByTagName('span')[0]; //获取一个span 元素
span.appendChild(div); //将div标签放在span标签内部
</script>
结果如图所示:(哈哈,我们貌似也不会把 div 标签放在 span 内!)
这个结果说明appendChild();插入是一种剪切操作
- parentNode.insertBefore(a,b);
div.insertBefore(a,b); //相当于:div inser a before b。(在div 中插入a,a在b之前插入)
<div>
<div></div>
<li></li>
<span></span>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var span=document.getElementsByTagName('span')[0];
var strong=document.createElement("strong");
div.insertBefore(strong,span); //在div 中插入strong标签,strong标签在span标签之前插入
</script>
删除:
- parent.removeChild(); //父节点删除它的子节点 页面将不再显示该标签(仅仅是剪切出来 以后还可以用)
div.removeChild(i); //(删除 div 标签中的 i 标签) - child.remove(); //真正的销毁 页面不再出现 以后也不再存在该标签
i.remove();
替换:
parentNode.replaceChild(new,origin); //用新节点替换旧的节点(原来旧标签仅仅被剪切出来)
元素.innerHTML
(div.innerHTML 查找div中的 所有内容,包含文本或者元素 注释等)
div.innerHTML=”123”; //将选取div 的所有内容替换为该内容(”123”)
div.innerHTML+=”123”; //可以在div中追加内容,一般加在div标签的尾部
<div>
<span>
<b></b>
</span>
<li></li>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
div.innerHTML+="<span style='background-color:red;color:white;font-size:20px;'>123</span>";
//追加一个 span标签 里面指定好样式
//注意此处style中要用''与外面的""区分开 不然会认错导致编译错误
</script>
标签.innerText(); //获取标签中的文本内容,基本用法和上面的innerHTML 一样(赋值就是整体内容的替换)
(火狐不兼容 火狐中可以用 div.textContent)标签.setAttribute('class','demo'); 给标签设置属性
(有某种属性替换,没有就是添加)
标签.getAttribute(‘class’); //获取标签的属性值
我们来看一个例子吧,还有在控制台上的输入结果。
<span style='background-color:red;color:white;font-size:20px;'>123</span>
<script type="text/javascript">
var span=document.getElementsByTagName('span')[0];
</script>
在设置了style 属性后 页面中物体的背景也由原来的红色变为黑色了。