javascript动态创建html内容

本文介绍了JavaScript中动态创建HTML内容的几种方法,包括使用`document.write()`、`innerHTML`属性、`createElement()`、`appendChild()`、`createTextNode()`以及`insertBefore()`。特别强调了`innerHTML`的读写功能和`insertAfter`函数的实现,为网页内容的动态更新提供了实用的解决方案。
  1. 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");
  1. appendChild() 语法parent.appendChild(child)
//创建一个节点p,插入到div中
var testdiv=document.getElementById("testdiv");
var para=document.createElement("p");
test.appendChild(para);
  1. creatTextNode() 创建一个文本节点
//创建一个Hello World 文本节点
var txt=document.createTextNode("Hello World");
para.appendChild(txt);//文本节点插入到p节点中
  1. insertBefore() parentElement.insertBefore(newElement,targetElement)
var gallery=document.getElementById("imagegallery");//把placeholder和description插入到图片清单的前面
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);
  1. 编写一个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);//否则插入到目标下一个元素之前
            }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值