使用 Javascript 创建动态 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17786596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Dynamic HTML with Javascript
提问by sreisman
I have been trying to dynamically append HTML input forms using a JS function to a webpage but am having trouble inserting them into the correct location. I have tried to create an empty div tag on line 40:
我一直在尝试使用 JS 函数将 HTML 输入表单动态附加到网页，但无法将它们插入到正确的位置。我试图在第 40 行创建一个空的 div 标签：
<div class="itemInfo"></div>
However, when I try to locate that tag from within my JS function, with the findElementById() function it seems not to find it. I want to create a copy of the three input forms above the empty tag I created and append them underneath, but no matter what I have tried I have not been able to figure out how to put the forms in that exact location. My JS function is as follows:
但是，当我尝试从我的 JS 函数中定位该标签时，使用 findElementById() 函数似乎找不到它。我想在我创建的空标签上方创建三个输入表单的副本并将它们附加在下面，但无论我尝试过什么，我都无法弄清楚如何将表单放在那个确切的位置。我的JS函数如下：
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var newDiv = document.createElement("INPUT");
newDiv.name = "myinput";
newDiv.value = "Enter Here";
oldInput.insertBefore(newDiv);
}
Rather than creating the forms again in this function, I would like to duplicate the following and simply append it after itself:
我不想在此函数中再次创建表单，而是想复制以下内容并简单地将其附加在其自身之后：
<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>
I tried to wrap the three forms in a tag and calling that by Id, but it did not seem to work either, which is why I tried to make an empty tag after it. I have searched everywhere and there is a lot of information regarding similar issues but I can't seem to apply the solutions to my situation. I really appreciate any help. Here is the entire page:
我试图将这三种形式包装在一个标签中并通过 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>
回答by AnaMaria
I changed your Javascript to this
我把你的 Javascript 改成了这个
function newItem(){
newInput="<p>Item: <input type="+"text"+" name="+"item"+"/></p>";
document.getElementById("itemInfo").innerHTML=newInput;
}
Here's a working FIDDLE
这是一个可用的 FIDDLE
回答by Aashray
You are trying to use the function document.getElementById("itemInfo");which looks for the id itemInfo. There is no element with the id itemInfoin your page. Create the divas follows:
您正在尝试使用document.getElementById("itemInfo");查找 id的函数itemInfo。itemInfo您的页面中没有带有 id 的元素。创建div如下：
<div class="itemInfo" id="itemInfo"></div>
<div class="itemInfo" id="itemInfo"></div>
This should help you get a reference of the divelement.
这应该可以帮助您获得div元素的引用。
EDIT: The Error is in the function, node.insertBefore(new Element,reference Element);is the correct function.
编辑：错误在函数中，node.insertBefore(new Element,reference Element);是正确的函数。
