您的位置：首页 > Web前端 > JavaScript

javascript动态创建html内容

2016-03-04 20:31 501 查看

Document.write() 把字符串插入到文档里

<html>
<head>
<title>Test</title>
<script type="text/javascript">
</head>
<body>
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script type="text/javascript">
document.write("<p>This is inserted.</p>");//调用函数，将这段插入到p标签之间
</script>
</body>
</html>

<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script type="text/javascript">
insertParagraph("<p>This is inserted.</p>");//调用函数，将这段插入到p标签之间
</script>
</body>
</html>
//example.js
function insertParagraph(text){
var str="<p>";
str+=text;
str+="</p>"
document.write(str);
}

这样做使代码不容易阅读，没有分离开。

2. innerHTML 属性可以用来读写给定元素里的HTML内容，适合一大段插入到网页中

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="example.js">
</head>
<body>
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script type="text/javascript">
insertParagraph("This is inserted.");//调用函数，将这段插入到p标签之间
</script>
</body>
</html>
//example.js
function insertParagraph(text){
var str="<p>";
str+=text;
str+="</p>"
document.write(str);
}
window.onload=function{
var testdiv=document.getElementById("testdiv");
alert(testdiv.innerHTML); //输出<p>This is <em>my</em>content.</p> 属性没有细节
}

innerHTML还有写的功能，一旦使用，内容全部被替换。

3. creatElement ( ) 语法：document.createElement(nodeName)

//创建一个p节点
var para=document.createElement("p");

appendChild() 语法parent.appendChild(child)

//创建一个节点p，插入到div中
var testdiv=document.getElementById("testdiv");
var para=document.createElement("p");
test.appendChild(para);

creatTextNode() 创建一个文本节点

//创建一个Hello World 文本节点
var txt=document.createTextNode("Hello World");
para.appendChild(txt);//文本节点插入到p节点中

insertBefore() parentElement.insertBefore(newElement,targetElement)

var gallery=document.getElementById("imagegallery");//把placeholder和description插入到图片清单的前面
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);

编写一个insertAfter函数（通用）

//DOM没有insertAfter函数  可以编写一个这样的函数
function insertAfter(newElement,targetElement){
var parent=targrtElement.parentNode;
if(parent.lastChild==targrtElement){
parent.appendChild(newElement);//如果目标元素是最后一个元素，直接把新元素放到parent上
}else{
parent.insertBefore(newElement,targetElement.nextSilbing);//否则插入到目标下一个元素之前
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航