將一個li＆ul標簽的數據從一個div類標簽轉移到另一個div id標簽，而沒有任何li＆ul標簽僅將數據

Question

這是我的代碼如下：

<div id="title">
      <span><b>Title</b></span>
</div>

<div class="data">
    <ul>
            <li id="cp_name" class=""><span>Name:</span> XXXX</li>
            <li id="cp_dept" class=""><span>Dept:</span> Editing</li>
            <li id="cp_role" class=""><span>Role:</span> YYYY</li>
    </ul>
</div>

原始輸出

標題

• 名稱：XXXX
• 部門：編輯
• 角色：YYYY

預期輸出和代碼

標題

部門：編輯

• 名稱：XXXX

• 角色：YYYY

   <div id="title"> <span><b>Title</b></span> <div id="cp_dept"> <span>Dept:</span> Editing </div> </div> <div class="data"> <ul> <li id="cp_name" class=""><span>Name:</span> XXXX</li> <li id="cp_role" class=""><span>Role:</span> YYYY</li> </ul> </div> 

我想提取或僅刪除“ cp_dept”的li＆ul標簽，即部門：編輯來自div class =“ data”的數據，並且希望將數據移入沒有li＆ul標簽的div id =“ title”標簽，即僅預期輸出和代碼中顯示的數據也會立即對頁面加載產生影響。

Answer 1

演示版

試試這個代碼。

var li=$('.data>ul>li').eq(1).remove();
var id=li.attr('id');
var html=li.html();
var div1=$('<div></div>').attr('id',id).append(html);
$('#title').append(div1);

Answer 2

var dept = $(".data ul li#cp_dept").html(); dept = "<div id='cp_dept'>" + dept + "</div>"; $("#title").append(dept); $(".data ul li#cp_dept").remove();

Answer 3

使用insertAfter jQuery函數：（刪除並追加）

$(function() {
    $('#cp_dept').insertAfter('#title span');
});

Answer 4

嘗試

$('#cp_dept').detach().wrapInner('<div />').contents().unwrap().appendTo('#title');

演示： 小提琴

Answer 5

看看這個javascript唯一答案

JS

(function() {
     var dpt = document.getElementById('cp_dept');
     dpt.outerHTML=""
     var tit = document.getElementById('title');
     tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
  })();

工作小提琴

剛剛在Javascript中添加或編輯了一行。 我display:none刪除或編輯cp_dept，而是將CSS分配為display:none 。 它具有相同的功能，但是通過這種方式，我不會擦除cp_dept標記的內容，因此HTML標記保持不變。

(function() {
     var dpt = document.getElementById('cp_dept');
    // dpt.outerHTML=""
     dpt.style.display="none";
     var tit = document.getElementById('title');
     tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
  })();

Answer 6

嘗試這個

var htm = $("#cp_dept").text();
$("#data ul #cp_dept").remove();
$("#title").append('<div id="cp_dept">'+htm+'</div>');

Answer 7

這是代碼

$(document).ready(function() {
    var getli = $('.data #cp_dept');
    $('.data #cp_dept').remove();    
    $creDiv = $('<div />').attr('id',getli.attr('id'))
                          .html(getli.html());
    $("#title").append($creDiv);
});

DEMO

但是您可能正在尋找更多，請對此發表評論

Answer 8

您可以創建一個新元素以附加“ cp_dept”目標，然后將新元素添加到“ #title”。

var title = document.getElementById('title');
var dept = document.getElementById('cp_dept');

var newDept = document.createElement('div');
newDept.innerHTML = dept.innerHTML;

// remove the old cp_dept
dept.parentNode.removeChild(dept);

title.appendChild(newDept);

Answer 9

$("li#cp_dept").each(function(){

var div = $("<div id='"+$(this).attr("id")+"'/>");

div.html($(this).html());

div.appendTo("div#title");

$(this).remove();

});