格式化Javascript输出_Javascript

格式化Javascript输出

javascript

格式化Javascript输出,javascript,Javascript,我使用下面的代码输出三个表单字段，但它们显示在单独的行中。我需要他们都出现在一个段落内的一行或与html换行符在最后。我确信这取决于li标签，但如果我改变它，例如，跨越它，则没有什么区别。我还希望每个字段指定不同的大小我已经添加了整个页面： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &l

我使用下面的代码输出三个表单字段，但它们显示在单独的行中。我需要他们都出现在一个段落内的一行或与html换行符在最后。我确信这取决于li标签，但如果我改变它，例如，跨越它，则没有什么区别。我还希望每个字段指定不同的大小

我已经添加了整个页面：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type="text/css">
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline;
  }
  </style>

  <script type='text/javascript' src='../../js/dummy.js'></script>





  <style type='text/css'>
    input {display: block;}
ul {list-style-type: none;}
  </style>

<?php
/*
need to get three new inputs on a single line
need to append another line with incremented names for inputs each time the button is hit


*/
?>


<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var myinput = document.getElementById("myinput");
    var form = document.getElementById("myform");
    var submit = document.getElementById("submit");
    var fragment = document.createDocumentFragment();
    var fakejson = JSON.stringify([{
                    "fieldname": "Part No.1"
                }, {
                    "fieldname": "Qty"
                }, {
                    "fieldname": "Description"
                }]);

    myinput.addEventListener("click", function(evt) {
            if (evt.target.value == "+") {
                sucsess(fakejson);
            }
        });


    function appendform(name) {
        var li = document.createElement("li");
        var newinput = document.createElement("input");
        newinput.setAttribute('type', 'text');
        newinput.setAttribute('name', name);
        newinput.setAttribute('size', 60);
        li.textContent = name;
        li.appendChild(newinput);
       form.insertBefore(li, submit);


    }

    function sucsess(data) {

        var json = JSON.parse(data);
        for (key in json) {
            appendform(json[key]["fieldname"]);
        }
    }

}//]]>  

</script>


</head>
<body>

<?php
if (!empty($_POST)) {
    print_r($_POST); echo "<br /><br />"; // print POST data received - delete in production
}
?>

  <ul>
    <form action="" id ="myform" method='post'>

        <input type="button" name="myinput" id="myinput" value='+' title='Add fields'>
        <input type="submit" name="submit" id="submit">

</form>
</ul>

</body>


</html>

使用此样式：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

你能添加你的HTML输出吗？每个字段已经在一个新行上了-我不想这样@NickIredale您添加的HTML输出似乎不正确。。。通过Javascript添加的在哪里？我希望在Javascript完成后看到最终的HTML输出。顺便说一句。作为的子级移动，否则生成的输入字段将不会随form@Dark-生成字段的代码未显示在源代码视图中。样式对其没有影响。它必须全部在Javascript中。