0

そのため、動的に作成している 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 のすぐ下にあるといいですね!

本当にありがとう！

4

1 に答える 1

0

書き直しを最小限に抑えるために、2 つのボックスを順序付けられていないリストでラップしてみてください。本当に CSS を避けたい場合は、インライン スタイルを設定して箇条書きを削除します。

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

関連するビットを最後の行に挿入しました。これらのものを作成するには、本当にdocument.createElementとを使用する必要があります。div.appendChild

于 2013-04-29T21:29:58.170 に答える