如何从Javascript更改html元素？

我需要你的帮助。我遇到了如何将html元素从javascript中更改的问题

这是多选的观点：

如果单击下拉菜单“多选”，并选择“下拉菜单”，视图将如下所示：

这是多选视图的代码：

<li data-type="multiple_choice" id="multiple-choices-html" class="multiple_choice data-drop">
  <p data-editable data-type="text" class="question"><%= raw item["question"] %></p>
  <ol type="a" class="options">
    <% item["options"].each do |opt| %>
        <li style="position: relative;">
            <p data-editable data-type="text"><%= opt %></p><a title="delete answer" data-delete-answerable href="#" style="position: absolute;top: 0;right: 0;"><span class="fa fa-minus-square-o" style="font-size: 1.2em;"></a>
        </li>      
    <% end %>
    <li style="list-style: none;"><a title="add more answer" style="margin-top: 10px;" data-answerable href="javascript:void(0);"><span class="fa fa-plus-square-o" style="font-size: 1.2em;"></a></li>
  </ol>
  <%= render "quizzes/components/actions", tipe: "Multiple Choice" %>
</li>

我不知道javascript代码如何将每个元素的html从多选改为下拉。我曾尝试过这样的innerHTML，但无法在代码中实现。你们能帮帮我吗

顺便说一下，我的英语很差

---

谢谢

问题是如何用浏览器中的JavaScript（而不是Ruby）替换

ol

和

ul

？下拉视图看起来不像我见过的任何下拉列表。我看到的唯一区别是项目符号（

*

）而不是

a.

，

b.

，

c.

。最后：当询问有关客户端操作的问题时，请引用浏览器看到的HTML，而不是生成它的Ruby代码。我根本不清楚上面的

标记插入了什么，因为您为选项引用的内容在那里是无效的HTML。您最好的选择是在问题中使用堆栈片段（

[]

工具栏按钮）放置一个runnable。您可以根据需要显示和隐藏不同的视图，而不是使用ul sir来处理大量DOM替换数据类型、id、类和ol。多选的每个元素html都替换为下拉列表。我还不知道如何替换这个代码，先生，问题是如何用浏览器中的JavaScript（而不是Ruby）替换

ol

。我看到的唯一区别是项目符号（

*

）而不是

a.

，

b.

，

c.

。最后：当询问有关客户端操作的问题时，请引用浏览器看到的HTML，而不是生成它的Ruby代码。我根本不清楚上面的

标记插入了什么，因为您为选项引用的内容在那里是无效的HTML。您最好的选择是在问题中使用堆栈片段（

[]

工具栏按钮）放置一个runnable。您可以根据需要显示和隐藏不同的视图，而不是使用ul sir来处理大量DOM替换数据类型、id、类和ol。多选的每个元素html都替换为下拉列表。我也不知道如何替换这个代码，先生

<li data-type="dropdown" class="dropdown data-drop" id="dropdown-html">
  <p data-editable data-type="text" class="question">Enter your question here ...</p>
  <ul class="options">
    <li style="position: relative;">
        <p data-editable data-type="text">Answer 1</p><a title="delete answer" data-delete-answerable href="#" style="position: absolute;top: 0;right: 0;"><span class="fa fa-minus-square-o" style="font-size: 1.2em;"></a>
    </li>
    <li style="list-style: none;"><a title="add dropdown answer" style="margin-top: 10px;" data-answerable href="javascript:void(0);"><span class="fa fa-plus-square-o" style="font-size: 1.2em;"></a></li>
  </ul>
  <%= render "quizzes/components/actions", tipe: "Dropdown" %>
</li>

<li>
  <a href="#" change-question data-replaceable="multiple-choices-html" data-type="multiple_choice">Multiple Choice</a>
</li>
<li>
  <a href="#" change-question data-replaceable="dropdown-html" data-type="dropdown">Dropdown</a>
</li>

$(document).on('click', '[change-question]', function(e){
  e.preventDefault();
  el_id = $(this).parent().parent().parent().parent().parent().attr('id');
  selected_type = $(this).attr('data-type');
  replaceQuestion(el_id, selected_type);
});

function replaceQuestion(el_id, selected_type){
  // in here, replace code will be running
}