使用HTML将一个HTML输入直接放在另一个下面

Question

所以我有一堆我正在动态创建的HTML元素。我真的希望元素“imageBox”直接出现在“mediaBox”下面，而不是像现在一样出现在它的左边。这是我现在的代码：

var div = document.createElement("div");
//HTML code for each element to be added with each new checkpoint
var nameBox = "<b>Checkpoint " + markerId + ":</b> <input type='text' id=" + markerId + " placeholder='Checkpoint name'>"
var descBox = "<textarea rows='4' cols='35' placeholder='Checkpoint description' id=" + markerId + "desc style='vertical-align: top;'></textarea>"
var mediaBox = "<input type='text' id='media" + markerId + "' placeholder='paste URL to YouTube video' size='23'>"
var imageBox = "<input type='text' id='image" + markerId + "' placeholder='paste URL to image' size='23'>"
var removeButton = "<button type='button' value='Remove' id='remove" + markerId + "' onClick='remove_marker(" + markerId + ")'> Remove </button>"
var undoButton = "<button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='remove_marker(" + markerId + ")'> Undo </button>"
var removeText = "<div id='removed" + markerId + "' style='display: none;'> Removed <button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='undo_Remove(" + markerId + ")'> Undo </button> </div>" 
div.innerHTML = nameBox + descBox + mediaBox + imageBox + removeButton + removeText;

我知道它真的很乱，理想情况下我应该使用CSS但我现在不是。它显示在我的页面上：

如果图片网址框位于YouTube网站下方，那就太棒了！

非常感谢！

Answer 1

为了最小化重写，您可以尝试将这两个框包装在无序列表中。如果你真的想要避免使用CSS，请设置内联样式以删除子弹。

div.innerHTML = (nameBox 
                 + descBox 
                 + '<ul style="list-style: none;"><li>' 
                 + mediaBox + "</li><li>" + imageBox 
                 + "</li></ul>" 
                 + removeButton 
                 + removeText);

我刚刚将相关位插入到最后一行。你真的应该使用document.createElement和div.appendChild来创建这些东西。