Question

我已将包含HTML布局的PHP文件包含到PHP文件中，并尝试使用javascript操纵HTML布局的DIV。我的问题是;如何将我创建的DOM表单插入到包含的PHP文件的DIV中？
这是我到目前为止所拥有的。

<?php
include_once('../index.php');
?>
<script>
/*var databox = document.getElementById("databox");
databox.innerHTML = "I added this text dynamically.";
var newform = databox.createElement("FORM");
document.getElementById("newform").name="form";
document.body.insertBefore(newform, databox); */


var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");

var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");

f.appendChild(i);
f.appendChild(s);

Answer 1

有很多好方法可以做到这一点。但是，因为你似乎使用纯Javascript并且似乎很舒服使用appendChild()这里是我提出的一些解释：

首先让我们设置一个上下文：

让我们说 index.php 就像这样：

//Put DOCTYPE, HTML tag, Head Tag and other stuff here
<body>
    <div id="IamID"></div>//I will receive the form.
//Site note I intentionally didn't put the end of the body tag.

现在假设我们有类似 form.php 这样的文件：

<?php
include_once('index.php');
?>
<script>
/*var databox = document.getElementById("databox");
databox.innerHTML = "I added this text dynamically.";
var newform = databox.createElement("FORM");
document.getElementById("newform").name="form";
document.body.insertBefore(newform, databox); */

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");

var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");

f.appendChild(i);
f.appendChild(s);
</script>
</body>
//Note end of body tag here.

执行 form.php 时，服务器将在呈现将发送到浏览器的页面之前执行所有PHP代码。浏览器接收的文件将是上面两个文件的串联，如下所示：

//Put DOCTYPE, HTML tag, Head Tag and other stuff here
<body>
    <div id="IamID"></div>//I will receive the form.
//Site note I intentionally didn't put the end of the body tag.
<script>
/*var databox = document.getElementById("databox");
databox.innerHTML = "I added this text dynamically.";
var newform = databox.createElement("FORM");
document.getElementById("newform").name="form";
document.body.insertBefore(newform, databox); */

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");

var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");

f.appendChild(i);
f.appendChild(s);
</script>
</body>
//Note end of body tag here.

由于Javascript在浏览器级别执行，因此您应该能够引用HTML标记甚至是 index.php 中定义的其他Javascript函数，因为您的浏览器会将这两个文件视为一个。

所以要回答你的问题，你可以在你的Javascript代码中添加这样的东西：

var div = document.getElementById("IamID");
div.appendChild(f);

其他小方注：

将HTML元素添加到HTML标记中的方法很简单。随意使用您觉得使用的任何方法。（我使用了appendChild，因为你似乎在你的代码中经常使用它。）

将DOM创建的表单插入包含的PHP文件中

1 个答案: