javascript - innerHTML 剥离类？

Question

我有一个带有 HTML 的 div，我正试图将其放入一个空的 div 中。新的 div 应该获取原始的所有内容和样式。

现有内容:

<ul id="existing_id" class="my_class">
  <strong>Does not show up in new div</strong>
  <li class="style">
    <p class="style">Shows up in new div</p>
  </li>
</ul>

新的空 div - 我将“existing_id”中的所有内容插入:

<div id="empty_div"></div>

我通过 JS 定位元素:

var existing = document.getElementById("exisiting_id")
var existing_li = existing.getElementsByTagName("li")
var empty_div = document.getElementById("empty_div")
var myArray = []

empty_div.innerHTML = ""

// Pushing each existing li element inside myArray
for (var i=0; i < existing_li.length; i++) { myArray.push(existing_li[n]; }

function make_it_happen() {
  empty_div.innerHTML += myArray.innerHTML
}

我正在从 #existing_id 获取内容在新的 div 中 - 但不是与每个元素关联的样式。一些元素也被忽略，例如 <strong>Does not show up in new div</div>

Answer 1

如果您想将所有 LI 元素的所有 HTML 收集到 empty_div 中，则不需要 myArray。应执行以下操作:

var existing = document.getElementById("existing_id")
var existing_li = existing.getElementsByTagName("li")
var empty_div = document.getElementById("empty_div")

function make_it_happen() {
  var html = '';
  for (var i = 0; i < existing_li.length; i++) {
      html += existing_li[i].innerHTML;
  }
  empty_div.innerHTML = html;
}