js DOM节点的创建插入删除查找替换例子

Posted 2020-06-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js DOM节点的创建插入删除查找替换例子相关的知识，希望对你有一定的参考价值。

五．动态创建标记

（1）传统的技术：

a)Document.write:可以方便快捷的把字符串插入到文档里。如图（3）

而这种方法的缺点是，行为与表现分开，有点类似于使用<font>标签去设定字体和颜色，工作起来不够优雅。尽量少用。

b)innerhtml：几乎所有浏览器都支持，可以用来读取，或者设置给定的元素里的HTML内容。把一大段HTML内容插入到网页时，innerHTML很适合，但是innerHTML属性不会返回任何刚插入内容的引用。如果想对刚插入的内容进行处理，则需要使用DOM提供的精确的方法与属性。这个属性比Document.write，值得推荐，它可以分离出来，用不着在<body>部分插入<script>标签。但是innerHTML只是HTML的专有属性，不能用于其他标记的语言文档。但是标准的DOM，在任何时候都可以用。

（2）深入DOM方法

a)创建元素节点：

createElement方法。用法：document.createElement(nodeName);

b)插入节点：

-->appendChild方法。在需要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。用法：parent.appendChild(child); 给一个空文档里面动态创建元素，要使用document.body.appendChild(child).

-->insertBefore方法。在已有的元素前插入一个新元素，用法：parentElement.insertBefore(newElement,targetElement);这个方法中，不必一定要知道父元素是哪个，因为parentNode属性值就是它，在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）。

appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说），insertBefore 方法是在已有的节点前添加新的节点（相对于子节点来说的）。

-->在现有元素的后面插入一个新元素。

没有现成的，但可以用已有的DOM方法来实现：

function insertAfter(newElement,targetElement){

var parent=targetElement.parentNode;

If(parent.lastChild==targetElement){

parent.appendChild(newElement);

}else{parent.insertBefore(newElement,targetElemnet.nextSibling);}

}

c)插入文本节点：

createTextNode方法。用法：document.createTextNode(text);

（4）删除节点：removeChild()方法，是从文档树中删除一个节点，比如，要删除p节点,p节点的id为p1，则是 var para1=document.getElementById("p1");