为什么文本框没有出现 Javascript动态创建Div元素前任 { 宽度：200px；位置：相对位置；背景色：#CCC；高度：150像素；填充：10px；保证金：5px；左边距：0px；浮动：左； } #纽迪夫 { 宽度：800px；高度：800px；边框：1px实心#000； } 边境 { 边框：1px实心#000； } image.cc=1；函数更改图像（图像） { if（image.cc==0） { image.cc=1； $（image.attr（'src'，'images/white_contact.png'）； } else if（image.cc==1） { image.cc=2； $（image.attr（'src'，'images/yellow_contact.png'）； } else if（image.cc==2） { image.cc=3； $（image.attr（'src'，'images/green_contact.png'）； } 其他的 { image.cc=0； $（image.attr（'src'，'images/red_contact.png'）； } } var i=0；函数createDiv（） { 如果（i_Javascript_Jquery_Html

为什么文本框没有出现 Javascript动态创建Div元素前任 { 宽度：200px；位置：相对位置；背景色：#CCC；高度：150像素；填充：10px；保证金：5px；左边距：0px；浮动：左； } #纽迪夫 { 宽度：800px；高度：800px；边框：1px实心#000； } 边境 { 边框：1px实心#000； } image.cc=1；函数更改图像（图像） { if（image.cc==0） { image.cc=1； $（image.attr（'src'，'images/white_contact.png'）； } else if（image.cc==1） { image.cc=2； $（image.attr（'src'，'images/yellow_contact.png'）； } else if（image.cc==2） { image.cc=3； $（image.attr（'src'，'images/green_contact.png'）； } 其他的 { image.cc=0； $（image.attr（'src'，'images/red_contact.png'）； } } var i=0；函数createDiv（） { 如果（i

javascript jquery html

为什么文本框没有出现 Javascript动态创建Div元素前任 { 宽度：200px；位置：相对位置；背景色：#CCC；高度：150像素；填充：10px；保证金：5px；左边距：0px；浮动：左； } #纽迪夫 { 宽度：800px；高度：800px；边框：1px实心#000； } 边境 { 边框：1px实心#000； } image.cc=1；函数更改图像（图像） { if（image.cc==0） { image.cc=1； $（image.attr（'src'，'images/white_contact.png'）； } else if（image.cc==1） { image.cc=2； $（image.attr（'src'，'images/yellow_contact.png'）； } else if（image.cc==2） { image.cc=3； $（image.attr（'src'，'images/green_contact.png'）； } 其他的 { image.cc=0； $（image.attr（'src'，'images/red_contact.png'）； } } var i=0；函数createDiv（） { 如果（i,javascript,jquery,html,Javascript,Jquery,Html,而不是使用onClick使用： <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <title>Javascript Create Div Element

而不是使用

onClick

使用：

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

image.cc=1;
function changeimage(image)
{
if (image.cc==0) 
  {
  image.cc=1;
  $(image).attr('src', 'images/white_contact.png');
  }
else if (image.cc==1)
  {
  image.cc=2;
  $(image).attr('src', 'images/yellow_contact.png');
  }
  else if (image.cc==2)
  {
  image.cc=3;
    $(image).attr('src', 'images/green_contact.png');
  }
    else
  {
  image.cc=0;
    $(image).attr('src', 'images/red_contact.png');
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
  $('#newdiv').append('<div id="div"'+i+'" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');

     $('#newdiv').find('#div'+i).append('<table border="0"><tr>'+
    '<td>Name:</td>'+
    '<td><input type="text"></td>'+
  '</tr><tr>'+
    '<td>Title:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
  '<tr>'+
    '<td>Contact:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
'</table>');

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable();

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>
    </p>

</body>
</html>

请参阅我在jsFiddle上的示例：

只需删除div和'+i+change

“div”'+i+'”

之间的双引号，将其改为

“div'+i+”

您的最终代码

$("#btn1").click(function(){
    // Your script to add the form
});


Javascript动态创建Div元素
前任
{
宽度：200px；
位置：相对位置；
背景色：#CCC；
高度：150像素；
填充：10px；
保证金：5px；
左边距：0px；
浮动：左；
}
#纽迪夫
{
宽度：800px；
高度：800px；
边框：1px实心#000；
}
边境
{
边框：1px实心#000；
}
image.cc=1；
函数更改图像（图像）
{
if（image.cc==0）
{
image.cc=1；
$（image.attr（'src'，'images/white_contact.png'）；
}
else if（image.cc==1）
{
image.cc=2；
$（image.attr（'src'，'images/yellow_contact.png'）；
}
else if（image.cc==2）
{
image.cc=3；
$（image.attr（'src'，'images/green_contact.png'）；
}
其他的
{
image.cc=0；
$（image.attr（'src'，'images/red_contact.png'）；
}
}
var i=0；
函数createDiv（）
{
如果（i<6）{
$（'#newdiv'）。追加（''）；
$（'#newdiv'）。查找（'#div'+i）。追加（''+
'姓名：'+
''+
''+
“标题：”+
''+
''+
''+
'联系人：'+
''+
''+
'');
}
i++；
$（“.ex”）.draggable（{containment:'parent'，cursor:'pointer'，opacity:0.6}）；
$（“.ex”）.dropable（）；
}

单击此按钮可动态创建div元素：

注：使用onClick或binding click功能是一样的。

您还有一个额外的”，请参见此

$（'#newdiv'）。追加（''；
^你这里还有一个

这无法解决问题，正在尝试使用元素div0、div1等创建div，而当前代码创建的所有div都具有相同的id“div”“如何使其保持在灰色分区内，现在文本框已不在分区内。除了此处显示的代码，您还有其他代码吗？此代码的工作方式与您预期的一样。我看到的是一个带有图像和3个输入（姓名、标题和联系人）的灰色框。”下面是灰色方框中的所有内容，您的问题得到了回答吗？我的建议是使用jQuery而不是长DOM字符串来构造新的div及其子级。这样更易于维护。例如。

    <html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Javascript Create Div Element Dynamically</title>

    <style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
    width:800px;
    height:800px;
 border:1px solid #000;     
}
.border
{
 border:1px solid #000; 
}

    </style>
<script>

image.cc=1;
function changeimage(image)
{
if (image.cc==0) 
  {
  image.cc=1;
  $(image).attr('src', 'images/white_contact.png');
  }
else if (image.cc==1)
  {
  image.cc=2;
  $(image).attr('src', 'images/yellow_contact.png');
  }
  else if (image.cc==2)
  {
  image.cc=3;
    $(image).attr('src', 'images/green_contact.png');
  }
    else
  {
  image.cc=0;
    $(image).attr('src', 'images/red_contact.png');
  }
}
</script>
 <script type="text/javascript" language="javascript">
var i=0;
    function createDiv()
    {


  if(i < 6) {
  $('#newdiv').append('<div id="div'+i+'" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');

     $('#newdiv').find('#div'+i).append('<table border="0"><tr>'+
    '<td>Name:</td>'+
    '<td><input type="text"></td>'+
  '</tr><tr>'+
    '<td>Title:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
  '<tr>'+
    '<td>Contact:</td>'+
    '<td><input type="text"></td>'+
  '</tr>'+
'</table>');

      }

   i++;
   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
 $( ".ex" ).droppable();

    }





    </script>
</head>
<body>

    <p align="left">
        <b>Click this button to create div element dynamically:</b>
        <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

</div>
    </p>

</body>
</html>

$('#newdiv').append('<div id="div' + i + '" class="ex" style="text-align: left;"><img class="myimage" onclick="changeimage(this)" border="0" src="images/white_contact.png" width="60"/></div>');
                                 ^ You have one extra " here