javascript - 如何使用 JavaScript 替换 html 元素？

Question

今天我花了大约 3 个小时尝试使用 JavaScript 替换页面上的 html 元素。

我尝试过很多事情，但没有取得多大成功。 例如，如果我想用代码片段 2 替换代码片段 1，该怎么做？

我已经尝试过

document.getElementById('wide-left').innerHTML="(code snippet 1)";

但它只是抛出一个错误。

抱歉，如果我解释得不够清楚，我已经尽力了。 任何帮助将不胜感激。

代码片段1

<h4 id="select-head">Select</h4>
<h4 id="summary-head">Summary</h4>
</div>

代码片段2

<div class="col9 single-product" id="wide-left">
    <div class="product-name hidden-lg">
        <h2><span>Reebok Ventilator x Mita</span> <em class="stockcode"><span>M48281</span></em></h2>
    </div>
  <!-- end of .product-name -->
  <div class="row unexpanded" id="product-info">
      <div class="col4 product-pic-width">

Answer 1

我将尝试在此处说明使用代码片段工具修改 HTML 的基础知识:

var snip1 = document.getElementById("snip1"),
  snip2 = document.getElementById("snip2");

setTimeout(function() {
  snip1.innerHTML = snip2.innerHTML;
}, 1000); // This code copies the HTML from within snip2 to snip1.

setTimeout(function() {
  snip2.innerHTML = "";
}, 2000); // This code clears snip2.

setTimeout(function() {
  snip1.getElementsByTagName("span")[0].style.color = "blue";
}, 3000); // This code changes the CSS for <span> within snip1.

setTimeout(function() {
  snip2.textContent = snip1.innerHTML
}, 4000); // This code copies the HTML from snip1 as text into snip2.

<div>
  Here is some <span id="snip1"></span> content!
</div>
<div>
  Here is some <span id="snip2"><span style="color:red">more</span></span>content!
</div>