使用JS来动态添加相同的一段HTML代码,如下的div组合

使用JS来动态添加相同的一段HTML代码,如下的div组合,第1张

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>RunJS</title>

    <script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">

        function c(a, b) {

            var ap = a.parents("#1option")

            if (!b) {

                ap.toggle()

            } else {

                ap.find(b).toggle()

            }

        }

        $(function() {

            $(":button[value='添加']").click(function() {

                $("body").append($("textarea").val())

            })

        })

    </script>

</head>

<body>

    <input type="button" value="添加" />

    <textarea style="display:none">

        <div id="1option" style="width:800pxheight:170pxdisplay:block">

            <div id="first">

                <div style="width:800pxheight:20pxbackground-color:#EDEDED">

                    <div id="legend" style="float:left">c</div>

                    <div class="fa fa-times" id="close12" onclick="c($(this))" style="float: rightcursor:pointer">x</div>

                    <div class="fa fa-arrows-alt" id="d1toBig" onclick="c($(this),'#seconddiv')" style="float:rightmargin-right:5px">s</div>

                    <div class="fa fa-wikipedia-w" id="d1To7day" style="float:rightmargin-right:5pxcursor:pointer"></div>

                </div>

                <div id="container" style="width:800pxheight:150pxbackground-color:#FFFFFF"></div>

            </div>

            <div id="seconddiv" style="height:900pxwidth:1580pxz-index: 9999 display:none position: fixed left: 10px top: 15pxbackground-color: #2E8B57">

                <div class="fa fa-times" id="close12" onclick="c($(this),'#seconddiv')" style="float: rightmargin-right:40pxmargin-top:7pxcursor:pointer"></div>

                <div id="newdiv1" style="width:1500pxheight:700pxmargin-left:40pxmargin-top:30px"></div>

            </div>

        </div>

    </textarea>

</body>

</html>

动态添加的html代码,如果在还没有真正渲染生成dom之前,js是无法获取到它们的,也就是节点根本不存在,所以原本的js就无法生效。

对于动态生成的html,应该在生成完成之后再执行一次需要对这些html *** 作的js代码。

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用

JavaScript

代码来实现。动态写入是一种很常见常用的方法。

1、用

innerHTML

写入

html代码

<div

id="abc"></div>

<script>document.

getElementById

("abc").innerHTML="要写入的文字或内容"</script>

2、

appendChild

()

方法:

<ul

id="myList"><li>Coffee</li><li>Tea</li></ul>

<button

onclick="myFunction()">点击向列表添加项目</button>

<script>

function

myFunction(){

var

node=document.createElement("LI")

var

textnode=document.createTextNode("Water")

node.appendChild(textnode)

document.getElementById("myList").appendChild(node)

}

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11298946.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存