javascript - 如何使用jquery移动数据 block

Question

我正在使用自定义标签“quest”。我不能在“任务”标签内有表格标签。因此，我需要 jQuery 将表格呈现在正确的位置。目前html是这样写的:

<pre><code>
<li><table block_type="no_border_table">
    <tbody>
    <tr><th></th><th>Lemons</th></tr>
    <tr><td>White</td></tr>
    <tr><td>Green</td></tr>
    <tr><td>OMEGA</td></tr>
    <tr><td>Happiness</td></tr>
    </tbody></table>
    <quest>Consider Table 1. For lemons
    How do we change this?
    a. Grapes
    b. Apples
    c. Mangoes
    d. Towels
    </quest>
    </li>
</code></pre>

渲染时，我需要句子文本和多项选择之间的表格，如下所示:

<pre><code>
<li>
    <quest>Consider Table 1. For lemons
    How do we change this?
    <table block_type="no_border_table">
    <tbody>
    <tr><th></th><th>Lemons</th></tr>
    <tr><td>White</td></tr>
    <tr><td>Green</td></tr>
    <tr><td>OMEGA</td></tr>
    <tr><td>Happiness</td></tr>
    </tbody></table>
    a. Grapes
    b. Apples
    c. Mangoes
    d. Towels
    </quest>
    </li>
</code></pre>

我在 http://www.elated.com/articles/jquery-removing-replacing-moving-elements/ 看到过 append()、prepend() 等的例子但是，我不确定如何在两个文本正文之间移动表格。我是 jQuery 的新手，因此希望得到非常详细的回答。

谢谢!

Answer 1

使用跨度

<pre><code>   
<li><table id="table" block_type="no_border_table">
<tbody>
<tr><th></th><th>Lemons</th></tr>
<tr><td>White</td></tr>
<tr><td>Green</td></tr>
<tr><td>OMEGA</td></tr>
<tr><td>Happiness</td></tr>
</tbody></table>
<quest>
<span id="tab">Consider Table 1. For lemons
How do we change this?</span>
<span id="tag">
a. Grapes
b. Apples
c. Mangoes
d. Towels
</span>
</quest>
</li>
</code></pre>

渲染时使用

//tab-上面消息的内容

var text=$("#tab").html();
$("#table").before(text);