2

これが重複した投稿である場合はお知らせください。問題の解決策を見つけることができませんでした。それは単純なものにしなければならない...

JavaScript を使用してフォームを作成しようとしています。フォームの html は次のとおりです。

<form>
  Time: <input type="time"> <br>
  Performer: <input type="text"><br>
  Link: <input type="text"><br>
  <input type="submit" value="Submit">
</form>

私がやろうとしているのは、javascript を使用してこの正確なフォームを作成することですが、要素はすべて同じ行に表示されます。ここに私のJavaScript関数があります:

function addPerformance(){
var brk = document.createElement("br");
var form = document.createElement("form");

//create time element
var time = document.createElement("input");
time.setAttribute("type", "time");
form.appendChild(time);
form.appendChild(brk);

//create perfomer element
var perf = document.createElement("input");
perf.setAttribute("type", "text");
form.appendChild(perf);
form.appendChild(brk);

//create link element
var link = document.createElement("input");
link.setAttribute("type", "text");
form.appendChild(link);
form.appendChild(brk);

//create submit element
var sub = document.createElement("input");
sub.setAttribute("type", "submit");
sub.setAttribute("value", "Submit");
form.appendChild(sub);
form.appendChild(brk);

document.body.appendChild(form);
}

「form.appendChild(brk)」は、HTMLの例のように改行を追加すると思ったものですが、機能しません。最終的には、フォームの各要素を 1 つの列に配置したいだけです。どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

6

form.appendChild(brk);2 回目に呼び出すと、参照されているHTMLElementbrkが現在の位置から新しい位置に移動します。つまり、最初から削除します。

代わりにクローンを追加

 form.appendChild(brk.cloneNode());
于 2013-08-05T14:24:08.860 に答える