javascript动态创建html内容

﹏ヽ暗。殇╰゛Y 2022-08-20 15:22 274阅读 0赞

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