0

这是我下面的代码：

<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>

原始输出

标题

  • 姓名：XXX
  • 部门：编辑
  • 饰演：YYYY

预期输出和代码

标题

部门：编辑

  • 姓名：XXX

  • 饰演：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 标签，即 Dept：编辑来自 div class="data" 的数据 & 不想将数据转移到没有 li & ul 标签的 div id="title" 标签中，即仅预期输出和代码中所示的数据，对页面加载也有直接影响。

4

9 回答 9

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);
于 2013-08-27T09:35:13.720 回答
0

这是代码

$(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);
});

演示

但您可能正在寻找更多，请发表评论

于 2013-08-27T09:38:16.480 回答
0

使用 insertAfter jQuery 函数：（删除和追加） 

$(function() {
    $('#cp_dept').insertAfter('#title span');
});
于 2013-08-27T09:28:20.527 回答
0

您可以创建一个新元素来附加“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);
于 2013-08-27T09:38:54.067 回答
0

尝试这个

var htm = $("#cp_dept").text();
$("#data ul #cp_dept").remove();
$("#title").append('<div id="cp_dept">'+htm+'</div>');
于 2013-08-27T09:34:53.573 回答
0 
$("li#cp_dept").each(function(){

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

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

div.appendTo("div#title");

$(this).remove();

});
于 2013-08-27T09:43:26.810 回答
0

尝试

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

演示：小提琴

于 2013-08-27T09:30:05.443 回答
0 
var dept = $(".data ul li#cp_dept").html();
dept = "<div id='cp_dept'>" + dept + "</div>";
$("#title").append(dept);
$(".data ul li#cp_dept").remove();
于 2013-08-27T09:25:31.203 回答
0

看看这个 javascript only 答案

JS

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

工作小提琴

刚刚在 Javascript 中添加或编辑了一行。我没有删除或编辑 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;
  })();
于 2013-08-27T09:34:31.207 回答