欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

动态创建标签的方法：document.write、innerHTML、creatElement等

程序员文章站 2022-07-11 10:55:41
...
前面我们讲述过利用getElementsByTagName和getElementById方法来获取某些特定的元素节点。

以及利用getAttribute来获取节点元素的某些特性，利用setAttribute来修改某些节点的属性。

下面我们将介绍一些DOM方法利用javascrip来改变网页的架构。
本片博客内容：

1、传统技术：document.write;innerHTML.

2、深入剖析DOM方法：creatElement、createTextNode、appendChild、insertBefor。

1、传统的定义方法

document.write 方法：
例1： 
<html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>
</head>
<body>
  <script>
    document.write("<p>This is inserted</p>")<！--利用document.write方法写入页面--> 
  </script>
</body>
</html>

例2： 
function insertP(text){
  var str= "<p>" 
  str += text
  str += "</p>"  //利用字符串的拼接构造"p"标签以及其内容
  document.write(str) 
}


将函数保存在 example.js 中。 

<html>
<head>
  <meta charset="utf-8"/>
  <title>Test</title>
</head>
<body>
  <script src="example.js">
  </script>
</body>
</html>


innerHTML 方法：

现如今几乎所有的浏览器都支持innerHTML方法，这个方法可以用来读写给定的HTML内容。下面

我们将会介绍一些它的用法。 
<body>
  <div id="testdiv"><!--定义div标签-->
     <p>This is<em>my</em>content</p>
  </div>
</body>


window.onload=function(){
  var testdiv = document.getElementById("testdiv")
  alert(testdiv.innerHTML)
}


输出结果为：

=><p>This is<em>my</em>content</p>

2、DOM方法 
createElement(nodeName) //创建标签标签

createTextNode(text) //创建文本标签

parent.appendChild(child) //将子元素插入到父元素中


创建p标签并且检测nodeName和nodeType 
window.onload=function(){
  var para=document.creatElement("p")
  info ="nodeName: "
  info+=para.nodeName
  info+=" nodeType: "
  info+=nodeType
  alert(info)
}

输出结果为：

=>nodeName: p nodeType: 1

appendChild 方法：

创建一个p标签并且将其插入Id为testdiv的div标签中 
var para=document.creatElement("p")  //创建p标签

var testdiv=document.getElementBId("testdiv") //获取Id为testdiv的div标签 

testdiv.appendChild(para)  //将标签插入到div标签中


createTestNode 方法：

创建文本元素将其插入到p标签中 并将构建好的p标签插入到div标签中 
window.onload=function(){
var para=document.createElement("p")
var txt= document.creteTestNode("Hellow World!")
para.appendChild(txt)
var testdiv=document.getElementById("testdiv")
testdiv.appendChild(para)
}


以上为分别利用传统方法和DOM方法在html中修改添加标签和文本内容。




相关标签： html JavaScript

上一篇： 网页的信息结构:结构 行为 表示 以及对样式的检索修改

下一篇： 两年半换第 4 份工作，做个总结

推荐阅读