DOM对象控制HTML无素——详解3

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法:

document.createElement(tagName)

参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

<script> var createElement = document.createElement('p') //创建了一个P标签的元素 </script>

插入

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

语法:

document.createTextNode(data)

参数:

data : 字符串值,可规定此节点的文本。

  <script>
var createElement = document.createElement('p') //创建了一个P标签的元素
var createTextNode = document.createTextNode("这是一个文本节点") //创建了一个文本节点
createElement.appendChild(createTextNode)//把文本节点导入元素节点
document.body.appendChild(createElement) //把元素节点导入body元素节点中,呈现在页面上
</script>

节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode:指定追加的节点。

<body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var newNode = document.createElement("li")
var text = document.createTextNode("css3")
newNode.appendChild(text)
ul.appendChild(newNode) =>css3
</script>
</body>

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var li = document.getElementsByTagName("li")[0]
var newNode = document.createElement("li")
var text = document.createTextNode("css3")
newNode.appendChild(text)
ul.insertBefore(newNode,li) //==>css3 在指定的无素节点前插入此创建的新元素
</script>
</body>

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node :必需,指定需要删除的节点。

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var li = document.getElementsByTagName('li')[0]
ul.removeChild(li) //删除了UL里第一个子节点
</script>
</body>

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法:

node.replaceChild (newnode,oldnew ) 

参数:

newnode : 必需,用于替换 oldnew 的对象。 
oldnew : 必需,被 newnode 替换的对象。

<body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var newNode = document.createElement("li")
var newNodeText = document.createTextNode("css3")
newNode.appendChild(newNodeText)
var oldNode = document.getElementsByTagName('li')[0]
ul.replaceChild(newNode,oldNode) //javascript替换成了CSS3
</script>
</body>
上一篇:HNU 13073 Ternarian Weights 解题报告


下一篇:hibernate----1-N--jointable(人与地址)