通过JavaScript运行时中创建的控件使用ID

更新时间：2023-02-08 21:52:24

使用JavaScript，您可以通过使用元素的innerHtml属性添加控件

示例:

div.innerHtml = "<span>Hello, World</span>";

使用诸如 JQuery [

Using JavaScript you can add controls by using the innerHtml property of the element

Example:

div.innerHtml = "<span>Hello, World</span>";

DOM manipulation can be made easier with a framework such as JQuery[^]

正如Mark所说，使用jQuery可使生活变得更轻松.因此，我做了一个小实验，该实验动态创建了一个div并将bing图放置在其中.三个按钮可以一起播放:

-创建元素！
-显示地图！
-隐藏和删除地图！

源代码只有几个注释，因此，如果您有任何疑问，请留下注释！
注意:
您需要在名为scripts的文件夹中安装jQuery.在此示例中，此文件夹与HTML文件位于同一文件夹中.在此处下载jQuery: jQuery下载 [

As Mark already stated life is easier with jQuery. So I cooked up a little experiment that dynamically creates a div and places a bing map inside it. There are three buttons that play together:

- Create Element!
- Show Map!
- Hide & Remove Map!

The source code has only a few comments so if there is anything you have doubts about please leave a comment!
Note:
You need to have jQuery in a folder called scripts. This folder is in the same folder as the HTML file in this example. Download jQuery here: jQuery Download[^]
For my example to work place the downloaded file into the scripts folder I mentioned above and rename it to jQuery.js. You can also adapt the script tag if you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <script type="text/javascript" src="./scripts/jquery.js"></script>
    <style type="text/css">
        div.bingMap {
            width:              600px;
            height:             500px;
            background-color:   #305060;
            color:              #A0B0C0;
        }
        div#mapviewer {
            margin-top:         50px;
            margin-left:        50px;
            width:              500px;
            height:             400px;
            border:             solid white 5px;
        }
        div#myContent  {
            font-size:          1.2em;
            font-family:        Arial;
        }
        div#myContent span {
            color:              black;
            font-style:         italic;
            font-size:          1.0em;
        }
        div#myContent span.OK {
            color: green;
        }
        div#myContent span.NOK {
            color: red;
        }
    </style>
</head>
<body>
    <div id="myContent" class="title">Here's my bing map! <span>Messages will appear here.</span></div>
    <input  type="button"

            name="doit"

            value="Create Element!"

            onclick="createMapDiv();"/>&nbsp;==&gt;
    <input  type="button"

            name="doit2"

            value="Show map!"

            onclick="showMap('swing');"/>&nbsp;==&gt;
    <input  type="button"

            name="doit3"

            value="Hide &amp; Remove Map!"

            onclick="hideAndDeleteMap('swing');"/>
</body>
<script type="text/javascript">
    //debugger;
    var myMapContent = '<div id="mapviewer"><iframe id="map" scrolling="no" width="500" height="400" frameborder="0" src="http://www.bing.com/maps/embed/?v=2&amp;cp=49.59427951755498~11.00093998582322&amp;lvl=13&amp;dir=0&amp;sty=r&amp;emid=e5d07e15-43f5-63d8-7c9a-7fc63a3733a5"></iframe></div>';

    function createMapDiv()
    {
        var myDiv =

(" )；如果(myDiv.length == 0 ) {

("div#myMapDiv"); if (myDiv.length == 0) {

上一篇 : ：在AVPlayerViewController中完成按钮单击事件下一篇 : 帮助使用jQuery处理子元素/父元素

通过JavaScript运行时中创建的控件使用ID

相关阅读

技术问答最新文章