用Javascript创建动态HTML

Question

我一直在尝试使用JS函数将HTML输入表单动态附加到网页上，但是将它们插入正确的位置时遇到了麻烦。 我试图在第40行上创建一个空的div标签：

<div class="itemInfo"></div>

但是，当我尝试使用findElementById（）函数从我的JS函数中查找该标签时，似乎找不到它。 我想在我创建的空标签上方创建三个输入表单的副本，并将其附加在下面，但是无论我尝试了什么，我都无法弄清楚如何将表单放置在该确切位置。 我的JS功能如下：

function newItem(){
  instance++;
  var oldInput = document.getElementById("itemInfo");
  var newDiv = document.createElement("INPUT");
  newDiv.name = "myinput";
  newDiv.value = "Enter Here";
  oldInput.insertBefore(newDiv);
}

我不想在此函数中再次创建表单，而是要复制以下内容，并将其简单地附加在其自身之后：

<p>Item: <input type="text" name="item"/> 
   Qty: <input type="text" name="qty"/>
   Color: <input type="text" name="color"/></p>
    <input type ="button" value="Add Item" onclick="newItem();"/>
    <div class="itemInfo"></div>

我试图将这三种形式包装在一个标签中，并通过ID进行调用，但它似乎也不起作用，这就是为什么我尝试在其后制作一个空标签。 我到处搜索，并且有很多关于类似问题的信息，但是我似乎无法将解决方案应用于我的情况。 我非常感谢您的帮助。 这是整个页面：

    <!DOCTYPE html>
<html>
  <head>
    <script type ="text/javascript">
      var instance = 0;

    function newItem(){
      instance++;
      var oldInput = document.getElementById("itemInfo");
      var newDiv = document.createElement("INPUT");
      newDiv.name = "myinput";
      newDiv.value = "Enter Here";
      oldInput.insertBefore(newDiv);
    }

    </script>
    <title>Welcome to New Age Embroidery!</title>
    <style type="text/css">
     body {font-family:sans-serif;color:#4f494f;}
     form input {border-radius: 7.5px;}
     h5 {display: inline;}
     .label {text-align: right}
     .ordersBook {float:left; padding-top: 10px;}
     .name {width:100%;float:left; padding:3px;}
     .wrapper { padding-left: 25px; padding-top: 20px}
    </style>
   </head>
   <body>
   <input type ="button" id="btnAdd" value="Add Item" onclick="newItem();"/>
    <div class = "wrapper">
     <h1>Welcome to New Age Embroidery!</h1>
     <div class="ordersBook_input">
     <form method ="post" class="form" action = "/newguest" method = 'post'>
       Name: <input type="text" name="name"/>

       <p>Item: <input type="text" name="item"/> 
       Qty: <input type="text" name="qty"/>
       Color: <input type="text" name="color"/></p>
        <input type ="button" value="Add Item" onclick="newItem();"/>
        <div class="itemInfo"></div>

       <p>Phone: <input type="text" name="phone"/>
       Email: <input type="text" name="email"/>
       Artwork: <input type="file" name="file"/>
       <p>Quote: <input type="text" name="quote"/></p>
     </p>
       <p>Notes: <textarea cols="40" rows="10"></textarea>
     </p>
       <input type="submit" value='Add Order'/>
     </form>
     </div>
     <div class ="ordersBook">
      <h3>Orders</h3>
      %for name in mynames:
      <div class="name">
      <h5>Name:</h5> {{name['name']}}
       <h5>Phone:</h5>{{name['phone']}}
       <h5>Email:</h5>{{name['email']}}
       <form action="/view/{{name['_id']}}" method='GET' ><input type="submit" value="View">
       </form>
       <form action="/remove/{{name['_id']}}" method='POST'> <input type="submit" value="Remove" onClick="confirm('Are you sure you want to permenantly remove this order?')">

       </form>
     </div>
     %end
     </div>
    </div>
   </body>
</html>

Answer 1

我将您的Java语言更改为此

function newItem(){  
     newInput="<p>Item: <input type="+"text"+" name="+"item"+"/></p>";
     document.getElementById("itemInfo").innerHTML=newInput;
   }

这是一个工作场所

Answer 2

您正在尝试使用函数document.getElementById("itemInfo"); 查找id itemInfo 。 您的页面中没有ID为itemInfo元素。 如下创建div ：

<div class="itemInfo" id="itemInfo"></div>

这应该有助于您获得div元素的引用。

编辑：错误在函数node.insertBefore(new Element,reference Element); 是正确的功能。

用Javascript创建动态HTML

问题描述

2 个解决方案

解决方案1
3 2013-07-22 12:00:08

解决方案2
2 已采纳 2013-07-22 11:44:42

用Javascript创建动态HTML

问题描述

2 个解决方案

解决方案1 3 2013-07-22 12:00:08

解决方案2 2 已采纳 2013-07-22 11:44:42

解决方案1
3 2013-07-22 12:00:08

解决方案2
2 已采纳 2013-07-22 11:44:42