操作标签文本

我不是女神ヾ 2023-09-27 13:46 1阅读 0赞

**innerHtml 操作双标签中间的HTML**

**innerText 操作双标签中间的 Text**

**value 操作表单标签值**

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style>
                            div{
                                    border: 1px solid red;
                                    width: 200px;
                                    height: 200px;
                            }
                    </style>
                    <script>
                            function fun1(){
                                    var element1=document.getElementById("d1");
                                    
                                    /*
                                     * innerText  不包含HTML结构
                                     * innerHTML  包含HTML结构
                                     * */
                                    
                                    console.log("innerText>>>"+element1.innerText);
                                    console.log("innerHTML>>>"+element1.innerHTML);
                                    
                                    
                                    var element2=document.getElementById("i1");
                                    console.log(element2.value)
                            }
                            function fun2(){
                                    var element1=document.getElementById("d1");
                                    //element1.innerText="<h1>一刻也不能分割</h1>"
                                    element1.innerHTML="<h1>一刻也不能分割</h1>"
                                    
                                    var element2=document.getElementById("i1");
                                    element2.value="无论我走到哪里";
                                    
                            }
                    </script>
            </head>
            <body>
                    <div id='d1'>
                            a
                            <span>文字</span>
                            b
                    </div>
                    
                    <input type="text" value="我和我的祖国" id='i1' />
                    
                    <input type="button" value="获取内容"  onclick="fun1()"/>
                    <input type="button" value="修改内容"  onclick="fun2()"/>
            </body>
    </html>

![4205c6800c6f056d855a1226928831eb.gif][]

![906728e3503cdce62738a2cbf535ecaa.gif][]

增加删除节点

![1fc34ac420080f3dcdeb9a7eb763a4ee.png][]

创建元素createElement()

增加元素appendChild()

删除元素removeChild()

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
                    <style>
                            #d1{
                                    border: 1px solid red;
                                    width: 80%;
                                    height: 200px;
                            }
                    </style>
                    <script>
                            function fun1(){
                                    var div1=document.getElementById("d1");
                                    // 通过JS创建标签
                                    var in1=document.createElement("input");
                                    in1.setAttribute("type","text");
                                    in1.setAttribute("value","请输入内容");
                                    
                                    var in2=document.createElement("input");
                                    in2.setAttribute("type","password");
                                    in2.setAttribute("value","123456789");
                                    
                                    var in3=document.createElement("input");
                                    in3.setAttribute("type","button");
                                    in3.setAttribute("value","删除");
                                    
                                    var br=document.createElement("br");
                                    
                                    in3.onclick=function (){
                                            div1.removeChild(in1)
                                            div1.removeChild(in2)
                                            div1.removeChild(in3)
                                            div1.removeChild(br)
                                    }
                                    div1.appendChild(in1);
                                    div1.appendChild(in2);
                                    div1.appendChild(in3);
                                    div1.appendChild(br);
                            }
                    </script>
            </head>
            <body>
                    <div id="d1">
                            
                    </div>
                    <input type="button" value="增加" onclick="fun1()" />
            </body>
    </html>

![5cf5825f88075925c2fbd12e65b8acaa.gif][]

![3c8bb1c63ec7ea16df2741a05643c28f.gif][]

案例开发

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8" />
                    <title></title>
             		<script>
             			function fun1(){
             				var outerDiv =document.getElementById("outerDiv"); 
             				// 1000
             				var left =Math.floor(Math.random()*1000)
             				// 500
             				var top =Math.floor(Math.random()*500)
             				
             				
             				outerDiv.style.marginTop=top+"px";
             				outerDiv.style.marginLeft=left+"px";
             			}
             			
             			function  fun2(){
             				alert("love you too")
             			}
             			
             		</script>
                    <style>
                            #outerDiv{
                                    width: 200px;
                                    height: 200px;
                                    border: 1px solid gold;
                                    background-color: gray;
                                    text-align: center;
                                    margin-top: 200px;
                                    margin-left: 200px;
                            }
                            #outerDiv input{
                                    width: 50px;
                                    height: 50px;
                                    margin: 20px;
                            }
                    </style>
            </head>
            <body >
                    <div id="outerDiv">
                            <h3>do you love me?</h3>
                            <input type="button" value="是" onclick="fun2()"/>
                            <input type="button" value="否" onmouseover="fun1()"/>
                    </div>
            </body>
    </html>

![482ba02ccc1e6969330593e3087d469c.gif][]

![30d26cc7b2bb4bb203ce0225da0b9e21.gif][]

[4205c6800c6f056d855a1226928831eb.gif]: https://img-blog.csdnimg.cn/img_convert/4205c6800c6f056d855a1226928831eb.gif
[906728e3503cdce62738a2cbf535ecaa.gif]: https://img-blog.csdnimg.cn/img_convert/906728e3503cdce62738a2cbf535ecaa.gif
[1fc34ac420080f3dcdeb9a7eb763a4ee.png]: https://img-blog.csdnimg.cn/img_convert/1fc34ac420080f3dcdeb9a7eb763a4ee.png
[5cf5825f88075925c2fbd12e65b8acaa.gif]: https://img-blog.csdnimg.cn/img_convert/5cf5825f88075925c2fbd12e65b8acaa.gif
[3c8bb1c63ec7ea16df2741a05643c28f.gif]: https://img-blog.csdnimg.cn/img_convert/3c8bb1c63ec7ea16df2741a05643c28f.gif
[482ba02ccc1e6969330593e3087d469c.gif]: https://img-blog.csdnimg.cn/img_convert/482ba02ccc1e6969330593e3087d469c.gif
[30d26cc7b2bb4bb203ce0225da0b9e21.gif]: https://img-blog.csdnimg.cn/img_convert/30d26cc7b2bb4bb203ce0225da0b9e21.gif