如何使用javascript将div标签数据设置为li标签？

Question

我正在尝试将div标签数据设置为li标签。作为参考，下面是执行“检查”时显示的代码。我想摆脱包含“domTitle”类的div标签。

<li style="display: inline;" id="list_name">
    <div class="domTitle">NEWS</div>
    <div class="domDateContainer">RECORDED ON MON JUL 31, 2017
    </div>
</li>

但实际上，使用javascript我想在执行“inspect”时显示类似下面的代码：

<li style="display: inline;" id="list_name">NEWS
    <div class="domDateContainer">RECORDED ON MON JUL 31, 2017
    </div>
</li>

Answer 1

$('#list_name').text($('#list_name > .domTitle').text());
$('#list_name > .domTitle').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li style="display: inline;" id="list_name">
    <div class="domTitle">NEWS</div>
    <div class="domDateContainer">RECORDED ON MON JUL 31, 2017
    </div>
</li>

使用jquery的解决方案

Answer 2

你可以在javascript中做类似的事情

＆＃13;

＆＃13;

function domTitle()
{
  var ele = document.getElementsByClassName("domTitle")[0];
  var content = ele.innerHTML;
  var parent = document.getElementById("list_name");
  parent.removeChild(ele);
  parent.innerHTML = content + parent.innerHTML;
}

＆＃13;

<li style="display: inline;" id="list_name">
    <div class="domTitle">NEWS</div>
    <div class="domDateContainer">RECORDED ON MON JUL 31, 2017
    </div>
</li>
<button onclick="domTitle()">click me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

var domTitle = $("#list_name > .domTitle").text();
$("#list_name > .domTitle").remove();
$("#list_name").html(domTitle + $("#list_name").html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li style="display: inline;" id="list_name">
  <div class="domTitle">NEWS</div>
  <div class="domDateContainer">RECORDED ON MON JUL 31, 2017</div>
</li>

＆＃13;

＆＃13;

＆＃13;