通过JavaScript运行时中创建的控件使用ID [英] Working with id from controls created in JavaScript runtime
问题描述
嗨！
我想在JavaScript中执行某项操作时遇到了问题.
我需要基于AJAX数据动态创建div ...(代码来自嵌套的for循环，因此可以将ID分配给即c21或其他任何值:
Hi!
I have a problem with something that I would like to do in JavaScript.
I need to create div dynamically based on AJAX data... (the code is from within nested for loops so the id could be assigned to ie c21 or whatever:
var div = document.createElement("<div id=''c" + j.toString() + i.toString() + "''>");
后来我想在div上进行操作(通过其AJAX API添加Bing映射)，就像...
And later on i would like to do operations on the div''s (adding Bing maps via their AJAX api) with soemthing like...
map = new VEMap(control);
...其中变量"control"是字符串，在此示例中为c21.
现在这行不通，我的猜测是div并不是真正用html编写的，它只是存在于浏览器运行时中...是否存在典型的解决方法或任何其他建议
...where the variable ''control'' is a string, in this example c21.
Now this doesn''t work and my guess is that the div isn''t really written out in html, it just exists in the browser runtime... Is there a typical workaround or any other suggestions
推荐答案
使用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();"/> ==>
<input type="button"
name="doit2"
value="Show map!"
onclick="showMap('swing');"/> ==>
<input type="button"
name="doit3"
value="Hide & 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&cp=49.59427951755498~11.00093998582322&lvl=13&dir=0&sty=r&emid=e5d07e15-43f5-63d8-7c9a-7fc63a3733a5"></iframe></div>';
function createMapDiv()
{
var myDiv =
(" )； 如果(myDiv.length == 0 ) {
("div#myMapDiv"); if (myDiv.length == 0) {
这篇关于通过JavaScript运行时中创建的控件使用ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
