如何使用Dojo动态添加div？
要使用Dojo动态添加div，您可以使用Dojo的DOM操作API。以下是一个简单的示例，说明如何使用Dojo动态添加div。
- 首先，确保您已经在HTML文件中包含了Dojo库的引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo 动态添加 div 示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
</head>
<body>
<button id="addDivButton">添加 div</button>
<div id="container"></div>
<script>
require(["dojo/on", "dojo/dom", "dojo/dom-construct"], function(on, dom, domConstruct) {
var addDivButton = dom.byId("addDivButton");
var container = dom.byId("container");
on(addDivButton, "click", function() {
var newDiv = domConstruct.create("div", {
innerHTML: "这是一个新的 div"
});
domConstruct.place(newDiv, container);
});
});
</script>
</body>
</html>- 在这个示例中，我们使用了Dojo的
dojo/on模块来处理按钮的点击事件，dojo/dom模块来获取页面元素，以及dojo/dom-construct模块来创建和添加新的div元素。 - 当用户点击“添加 div”按钮时，我们创建一个新的div元素，并将其添加到名为“container”的div中。
这个示例展示了如何使用Dojo动态添加div。您可以根据自己的需求修改这个示例，以适应您的项目。
相关·内容
1回答
DOJO中的动态分区
、、、
我尝试在DOJO中动态创建div，Div的数量取决于值count Div必须在<div data-dojo-type="dijit/layout/TabContainer" id="maintab" style="width:100%; height:100%;">下插入。
我的动态div必须看起来像<div data-dojo-type="dijit/layout/ContentPane" data-dojo-id="dtab" title="title" data-dojo-p
浏览 0提问于2015-10-09得票数 0
回答已采纳
我想动态创建一个div，并附加一个dojoAttachpoint。我如何做到这一点呢？
下面的代码用于动态添加dojoAttachpoint，但我也想附加一个div
var txt = dojo.create("div", {
id: "alert",
role: "alert",
'class': "contenthide",
innerHTML: msg
}, dojo.body());
浏览 0提问于2011-04-01得票数 2
1回答
我在道场学习dnd。通过ajax获得的json数据。为了显示数据的动态字符串，创建了一个div表单。dnd申请，看上去不错。但dnd不起作用。当我想到那是因为字符串类型。我请求你的建议！
myboard.html
<script>
require([ "dojo/parser","dojo/dom", "dojo/on", "dojo/request", "dojo/json","dojo/_base/array"
,"dijit/Dialog"
浏览 4提问于2014-05-15得票数 0
回答已采纳
我正在开发一个包含Dialog的自定义dojo小部件。从模板html文件以文本的形式加载Dialog内容。我遇到的问题是，在将Dialog添加到dom之前，我需要将dom节点添加到Dialog内容中。
这是我的模板(DialogContent.html)：
<div>
<table>
<tbody>
<tr>
<td>
<label for="printTitle">Map Title:&
浏览 0提问于2013-06-04得票数 0
回答已采纳
我是javascript和dojo的新手，我正在尝试编写代码来动态导航到另一个URL。使用javascript似乎很容易做到这一点，但在dojo/on中我无法让它工作。以下是我的示例代码。微不足道的回调可以正常工作。dojo/on回调调用回调，但新页面永远不会出现。我必须用dojo动态地做这件事，因为我的项目需要它。有人知道这是为什么失败的吗，以及如何让它工作？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
浏览 3提问于2013-03-12得票数 2
回答已采纳
5回答
我正在寻找最短的语法，它可以为我提供与下面这行dojo相同的结果：
var divblock5 = dojo.create("div", {className: "barlittle", id: "block5"});
但是我想使用普通的JavaScript而不是dojo框架。我有很多动态元素的创建，我想让我的代码尽可能简短。
浏览 3提问于2013-01-28得票数 1
回答已采纳
嗨，我正在尝试将事件侦听器添加到动态创建的"<a></a>"元素中，但没有成功。
以下是项目/元素：
var item = "<div class='item' id='" + id + "'>"
+ "<div class='cell ion-chevron-right'>"
+ "<span class='cell items'>" + te
浏览 2提问于2016-05-03得票数 0
回答已采纳
2回答
以下是我从中提取的示例，并对其进行了一些更改。这个例子非常好用。
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/ja
浏览 0提问于2013-02-01得票数 4
回答已采纳
我有一个手风琴，内容窗格以编程的方式添加。在其中一个窗格中，我想添加一个选项卡容器，它有许多选项卡。每个选项卡都有许多需要动态创建的控件。但是创造动态的方式给了我困难的时间。我决定采用不同的方法使用domConstruct.place添加它。我有代码的设计做声明的方式，它在单独的html页为每个选项卡。然后，我尝试将整个选项卡容器作为子元素添加到现有的手风琴内容窗格中。
只有文本内容出现在屏幕上，但没有选项卡容器控件。
以下是代码：
require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "d
浏览 1提问于2013-10-03得票数 0
回答已采纳
7回答
我想知道如何动态更新dojo.dijit.tree组件的数据。目前，我正在使用dojo.data.ItemFileReadStore和dijit.tree.ForestStoreModel创建树。一旦我创建了树，我想用新的JSON数据定期重新加载它。
这就是我目前创建树的方式：
<div dojoType="dojo.data.ItemFileReadStore" jsId="myStore" url=getJSONResult></div>
<div dojoType="dijit.tree.ForestStoreMod
浏览 0提问于2011-03-24得票数 9
回答已采纳
我想应用dnd来使用dojo动态创建div。我尝试了很多方法来应用dnd功能。这是我的密码。
var inputdiv = document.createElement('div');
inputdiv.setAttribute("id", count);
inputdiv.style.background = "white";
inputdiv.style.height = "30px";
inputdiv.style.width = "60px";
dojo.addClass(inputdiv, "do
浏览 2提问于2013-11-27得票数 0
回答已采纳
2回答
我试图将特定html标记中的内容加载到Dojo内容窗格中，而不是替换整个内容窗格。我正在加载的html包括一个标记定义的小部件，我希望在加载新行时呈现该小部件。
因此，我有一个通过ajax动态填充的表，即：
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, isDebug:true"><
浏览 2提问于2010-12-29得票数 1
回答已采纳
我有以下borderContainer，它的大小是硬编码的。我正在尝试根据屏幕分辨率动态更改它：
<div id="border1" dojoType="dijit.layout.BorderContainer"
style="width: 1010px; height: 500px">
...
</div>
我尝试执行以下操作来动态更改它，但它似乎不起作用
dojo.require("dojo/window");
var bc = dijit.byId("borderConta
浏览 4提问于2017-11-21得票数 0
1回答
我遇到了这样的情况:我用dojo.xhrGet从服务器动态地加载DIV。一切都很好。内容返回良好，DIV被插入到页面精细中。注意，在这种情况下，在发生其他事件之前，我无法知道要加载的DIV。
问题似乎在于动态DIVs中包含的DIJIT小部件不是DIJIT小部件，而是运行中的HTML小部件。也就是说，我可以使用"dojo.byId('widgetID')“来处理它们，并使用标准的JavaScript，但是如果我尝试”注册表(‘widgetID’)“，就会得到”未定义的“响应。
如何将动态加载和其他声明性DIV代码解析为真正的DIJIT小部件？
浏览 5提问于2016-04-21得票数 1
回答已采纳
我有一个自定义的dojo小部件(提醒)，我想在事件上重新加载(单击小部件上的添加按钮，将打开一个对话框，我将在其中填充提醒数据，然后单击提交。单击submit按钮时，小部件应重新加载我填写的数据)。
<body class="claro teller">
<form name="tellerForm">
<input type="hidden" name="expldQryStr" id="expldQryStr">
浏览 3提问于2015-05-20得票数 0
1回答
是否可以将动态声明代码插入到例如。一个borderContainer？我已经得到了一个borderContainer，并且希望用像'/modules/example/example.php'这样的文件的内容来替换'center‘内容：(我已经将输出打印到了我的控制台)
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="centerPanel">
<div dat
浏览 3提问于2014-03-11得票数 0
回答已采纳
我使用的是一个Dialog，它包含一个TabContainer，它的ContentPane既包含一个图像，也包含一个带有文本的嵌套ContentPane。我希望嵌套的ContentPane滚动，但我不希望它的父容器与图像滚动。
<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;"&g
浏览 4提问于2014-10-02得票数 0
回答已采纳
1回答
滑块更改处理程序
、、
我正在动态创建一个范围滑块，但在它上运行更改处理程序时遇到了问题。
所以在代码中是这样的：
$('#layersTab').html("<input type=\"range\" id=\"layerSlider\" value=\"0\" min=\"0\" max=\"100\" \><br\>");
是的，在html its中：
<div data-dojo-type="dijit.TitlePane" id="titleP
浏览 1提问于2013-05-10得票数 1
回答已采纳
1回答
我试图用模板html动态添加表单域。我已经设法让dojo/声明写入DOM，但是调用parser.parse(新元素)似乎不能解析这些元素。
我现在拥有的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
var dojoConfig = {
async: true,
parseOnLoad: false,
has:
浏览 0提问于2016-06-06得票数 0
6回答
我有一个下面的静态div：
<body>
<div id="div1"></div>
....
我想使用dojo在div1中动态添加一个id为"div1_1“的div。我该怎么做呢？
浏览 2提问于2009-03-26得票数 5
回答已采纳
ExpandableSearchComponent.html：
<div class="${baseClass}">
<div data-dojo-type="dijit/_HasDropDown" data-dojo-props="dropDown: 'containerNode'">
<div data-dojo-type="dijit/form/TextBox"
name="${SearchViewFieldName}Textbox
浏览 4提问于2016-09-13得票数 1
回答已采纳
我有一个动态生成的页面(和div )，这个页面需要做的是在页面加载后立即滚动到特定的div。这段代码的怪异之处在于...
下面的“按钮”代码，当你在它(或onclick)上运行鼠标时，它工作得很好。它完美地执行了rolldownTo函数。但是，当我尝试使用window.onload,指定指定相同的操作时，什么也没有发生。我已经包含了“按钮”代码和下面的window.onload。
<html>
<head>
<title>Help</title>
<script LANGUAGE="JavaScript1.2" type=
浏览 1提问于2011-01-07得票数 0
回答已采纳
5回答
有一个具有固定高度和宽度的div。此div包含动态内容text-content。如果文本变得太长，它将“分解”div。当文本变得太短时，div会看起来有点空。
所以我的结论是，当文本短的时候，字体要大一些，文本长的时候，字体要小一些。
从来没有尝试过这样的事情，怎么做到呢？
dojo :因为我已经使用了dojo作为js框架，包括jquery或任何其他框架都是没有选择的。当然，还是要感谢你的回答。
浏览 4提问于2011-11-14得票数 6
回答已采纳
我有一个TabContainer中有6个自定义小部件的JSP页面。代码看起来像这样：
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', gutters:false">
<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>">
<div
浏览 0提问于2014-06-06得票数 0
3回答
我在SO ( )上找到了这个页面，但我仍然不是很清楚它是如何从一个URL调用中打开一个标签的。
这是我的HTML。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/do
浏览 0提问于2011-01-05得票数 0
回答已采纳
1回答
小部件不会在TabContainer中呈现，除非浏览器(我正在使用Chrome)窗口被调整大小，或者打开开发工具。我尝试过在早期线程上提供的解决方案，比如设置BorderContainer、TabContainer和ContentPanes的高度和宽度，但没有区别。下面是我的代码片段。指向“步骤”，我附加了某些数据。这个选项卡“步骤”是问题所在。有解决办法吗？下面是我的密码..。
<div>
<div data-dojo-type="dijit.layout.BorderContainer"
浏览 1提问于2014-12-19得票数 0
回答已采纳
1回答
我在控制台中显示用户在输入中输入的数据时遇到了问题(只有在按下提交按钮后，才使用Dojo )。现在它显示"Name: Widget dijit.form.TextBox，dijit_form_TextBox_2“
我的HTML代码不是动态的：
<div class="NameContainer">
<label class="label1" for="name">Name:</label>
<input data-dojo-attach-point="nameInput
浏览 19提问于2019-08-02得票数 1
回答已采纳
1回答
我使用Dojo 来布局表单应用程序。我使用Dojo容器来保存表单元素。根据屏幕大小，我希望将表容器的列(data-dojo=“cols：)设置为1、2或3，但是我无法为表容器列设置一个动态值。
如何在运行时设置data-dojo-props= cols:的值？
我知道可以通过检测屏幕大小和使用dijit.byId().set("attribute", value)来使用java脚本，但是这涉及到设计和布局，我更喜欢由css处理。所以我需要一个css解决方案。
<div data-dojo-type="dojox.layout.TableContainer"
浏览 1提问于2014-07-19得票数 0
我有两页纸。
viewport1.html
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<s
浏览 1提问于2014-07-29得票数 0
我是dojo的新手，正在尝试解决如何通过编程而不是声明的方式来做一些事情。我可以很容易地创建一个包含dojox.mobile.ListItem的dojox.mobile.RoundRectList，该dojox.mobile.ListItem本身又包含一个声明式的dojox.mobile.switch，例如
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:&#
浏览 1提问于2013-04-19得票数 0
我想在dijit/TooltipDialog.中显示dojo select动态加载dojo select的项。因此，我想添加这个select程序。TooltipDialog的内容可以是一个对象，但select需要持有一个domNode。守则是：
<head>
<script>
require([
"dojo/parser",
"dijit/form/Select",
"dijit/TooltipDialog",
浏览 2提问于2016-07-14得票数 2
回答已采纳
1回答
我使用下面提到的代码来动态创建复选框和标签。但是标签和复选框没有在同一行上对齐。有谁可以指导下面代码中的错误之处？
dojo.require("dijit.form.CheckBox");
dojo.ready(function(){
var widgetNode = dojo.doc.createElement("DIV");
chk = dojo.create("input", {id:"cbox", type:"checkbox"}, widgetNode);
lbl = doj
浏览 4提问于2017-01-19得票数 0
回答已采纳
我有一个动态dojo表单，其中有一个dijit.form.Select，我尝试通过各种方式动态设置它的选定值。我让select小部件加载并显示数据，但它总是忽略我的每一次尝试。我使用的是dojo 1.7。
var bcntryval = <?= $this->billingContact->countryId;?>;
var countryStore;
function onBillingShow() {
if (countryStore) countryStore.close();
countryS
浏览 0提问于2012-06-22得票数 3
回答已采纳
我想在LI中的ListItem类型上添加图标，如何以编程方式在运行时添加此图标。
<ul data-dojo-type="dojox.mobile.RoundRectList" class="resultList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"addAPatientView", icon: "mblDomButtonDarkBlueCheck"'>
浏览 0提问于2013-02-06得票数 1
回答已采纳
由于某些原因，样式元素没有应用到TabContainer中。标签标题显示为白纸黑字文本，互相干扰。
<script src="http://localhost/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async:true,parseOnLoad:true"></script>
<link href="http://localhost/dojo/1.9.1/dojo/resources/dojo.css" type="text/css"
浏览 2提问于2013-11-17得票数 1
回答已采纳
我想在点击element后添加dijit.Editor。
dojo.ready( function() {
var handle = dojo.connect(dojo.byId("k"),"onclick",
function(){
dojo.byId("k").innerHTML +=
"<div data-dojo-type=\"dijit.Editor\" id=\"editor\" style=\&#
浏览 0提问于2011-12-19得票数 1
回答已采纳
我有一个dojo自定义小部件，它使用带有边界容器的模板和带有顶部、前导、中心、尾随和底部区域的内容窗格。问题是内容窗格是从上到下显示的，而不是以正确的布局格式显示的：
这是我的模板：
<div>
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="reg
浏览 2提问于2014-09-24得票数 0
回答已采纳
我使用dojo将onclick添加到我的一个div中
dojo.connect(dojo.byId("button1"), "onclick", function () {
alert('clicked');
}
我现在需要在Javascript的其他部分动态调用完全相同的函数，我试过了
dojo.byId("button1").onclick();.
它没有起作用。请帮我解决这个问题。
浏览 1提问于2013-02-03得票数 0
回答已采纳
我在DOJO1.6和DOJO1.4中有以下代码。在1.6版本中，它工作得很好，但在1.4版本中不能工作。选项卡式菜单显示为just list。请帮助我，以便代码在DOJO1.4中也能正常工作。
<script src="/portal_dojo/v1.4.3/dojo/dojo.xd.js" djConfig="parseOnLoad:true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContai
浏览 1提问于2012-01-19得票数 0
到目前为止，我的代码如下：
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="http://o.
浏览 0提问于2012-01-14得票数 1
回答已采纳
1回答
我在一个项目中使用dojo，我有一些页面使用dijit/layout/AccordionContainer，这个手风琴有3个或更多个子容器，通常这些容器根据当前页面上的可变高度动态地改变它们的高度。我不得不说，手风琴是使用dojo文档中的声明性示例生成的。
但有时我只需要一个手风琴容器就比其他的大。
例如:我需要最后一个容器(名字也是:这个)比其他两个容器大.
我的实现很简单，我使用了docs示例：
<div class="hook" style="width: 300px;">
<div class="hook" d
浏览 3提问于2015-01-12得票数 0
回答已采纳
我正在制作一个带有两个dijit.form.Form的filteringSelect，可以动态添加更多的自定义筛选，但是当我试图发布带有xhr.post的表单时--没有提交值--我尝试在发布之前将表单转换为Json，但是对象是空的。我知道我可以访问所有的过滤，选择值和张贴它们，但我的目标是“容易提交”自动way.Thanks的帮助提前。
define([
"dojox/layout/ContentPane",
"dijit/form/Form",
"dijit/form/Button",
"dojox/widget/Standby"
浏览 2提问于2015-02-26得票数 0
回答已采纳
我不清楚如何在dojo中包含用于创建内容窗格的布局模块。我想在我的一个小部件中布局一些内容。
在dojo 中，它们有一个需求模块
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);
但是我想要包含的小部件是这样的
define([
"dojo/_base/declare",
"dojo/parser",
"dijit/_WidgetBase",
&
浏览 4提问于2016-05-10得票数 2
代码应该在特定DIV的末尾添加一个新节点。为此，它必须找到一个名为branchID的元素的值属性。然后，它将该值递增1，并向页面添加新的HTML。在jQuery中，我将使用以下代码
$('#btnAddFork').click( function(){
var branchID = $('#branchID').attr( 'value' );
var newNodeHTML = "<div class='node'>new node #" + (++n) + "</div
浏览 2提问于2012-10-06得票数 0
回答已采纳
当页面加载到应用程序中时，加载框架库和CSS需要几秒钟时间，我得到了一个明显的blip.How来防止这种情况发生？
我在Android虚拟设备上进行了测试，运行的是版本2.2的操作系统。我也曾在运行着4.1版操作系统的实际设备上尝试过。
.html文件：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accordfintech</title>
<meta name=
浏览 1提问于2013-07-18得票数 2
回答已采纳
在我使用Dojo1.5实现一个小的web界面之前，只需要引用本地文件夹( dojo，dijit，dojox)的路径，并使用dojo.require加载我想要的模块，它工作得很好。现在我升级到了1.7，突然之间，即使使用url引用，它也不能工作。我引用了一个演示项目，并希望通过一些更改重新创建页面。我将它分解为最简单的形式，只有主菜单，它不是这样显示的，而只是一个接一个的文本术语。
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
浏览 3提问于2012-05-02得票数 0
回答已采纳
1回答
我试图声明一个dijit TextBox，但我无法将focus事件附加到它。
我已经尝试过声明性地这样做：
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-name="searchBox_input" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search.
浏览 0提问于2013-03-25得票数 1
回答已采纳
我对dojo非常陌生(这是我关于stackoverflow的第一个问题，所以简单一点:)。我正在做一个新的项目，被要求调查dojo mobile。以下代码的目的只是测试dojo mobile在一个简单的html页面中提供的不同可用小部件。
我遇到了以下问题，当我在浏览器中运行此代码或将其部署到移动设备时，在单击鼠标或在触摸屏上释放后应该触发的释放事件似乎存在问题，需要注意的是，这种情况只发生在涉及拖动对象的小部件中。例如，按钮和选项卡栏工作正常。这只适用于SpinWheelDatePicker/SpinWheelTimePicker，slider，switch等。
在Chrome中：
Unca
浏览 2提问于2012-05-30得票数 0
我正在尝试创建一个3窗格布局顶部、左侧和右侧(主)，如所示
我认为dijit的这个模板会起作用：
<div class="main" data-dojo-attach-point="dapDomNode">
<div id="header" data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="reg
浏览 3提问于2014-11-13得票数 0
嗨，我想在文本框上附加单击事件，附件中的值为A，与B相同。我正在使用dojo工具包，代码如下：
window.onload = function () {
dojo.query('.test').onclick(function(){
alert('test');
});
};
我有一个具有两个列名和值的表控件，这两个列都包含测试列名textbox，我添加了一个名为‘textboxes.On’的类，表行动态增加，如附件所示。现在我关心的是，这些文本框是动态增加的，我如何才能在这些
浏览 2提问于2014-04-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
