javascript - 如何反复移动 HTML 元素的内容？

Question

如何添加在纯 Javascript 中将某些内容从一个元素拖到另一个元素并再次拖回来的功能？

我需要此功能来根据桌面和移动设备尺寸更改内容的位置。

我已经制作了自己的函数，但问题是无法执行最后一个操作，将内容再次移动到其原始位置。我认为它需要一些绑定(bind)功能？

function moveContent(fromid, toid)
{
    // Insert After This
    var ref_el = document.getElementById(toid);
    var parent = ref_el.parentNode;

    // From Element
    var from_el = document.getElementById(fromid);
    if (from_el != null)
    {
        var from_el_parent = from_el.parentNode;
        tparent = from_el.parentNode;
        if (tparent === null || tparent.id !== toid)
        {
            var holder = from_el.outerHTML; 
            from_el.innerHTML = '';

            // Insert inside
            ref_el.innerHTML = holder;  
        }
     }
}

Answer 1

函数示例

  function ChangeContent(aid,bid)
      {
         if((document.getElementById(aid)!=null)&&(document.getElementById(bid)!=null))
           {
              var atemp=document.getElementById(aid).innerHTML;
              var btemp=document.getElementById(bid).innerHTML;
              document.getElementById(aid).innerHTML=btemp;
              document.getElementById(bid).innerHTML=atemp;
           }
      }

HTML 示例

    <div id='A'><hr>
      First div content<hr>
    </div>
    <div id='B'>
       <strong>List</strong><br>
        <ul>
          <li>1</li>
          <li>2</li>
          <ul>
            <li>3.1</li>
            <li>3.2</li>
          </ul>
        </ul>
    </div>
    <input type='button' onclick='SwapContent(\"A\",\"B\");' value='Swap'></button>

注释

您必须将 JavaScript 放在 HTML 之后，否则 JavaScript 将无法找到要交换内容的元素。

“onclick”函数参数中的引号都是这种类型，因为所有代码都是为PHP+Html打印宽度“而编写的。