javascript动态创建html内容

JavaScript动态生成HTML内容技巧

最新推荐文章于 2022-11-12 21:36:29 发布

原创最新推荐文章于 2022-11-12 21:36:29 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了JavaScript中动态创建HTML内容的几种方法，包括使用`document.write()`、`innerHTML`属性、`createElement()`、`appendChild()`、`createTextNode()`以及`insertBefore()`。特别强调了`innerHTML`的读写功能和`insertAfter`函数的实现，为网页内容的动态更新提供了实用的解决方案。

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);//否则插入到目标下一个元素之前
            }
    }