使用 HTML 将一个 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，但我现在不是。它在我的页面上显示如下：

如果图片 URL 框可以在 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 来创建这些东西。