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>

Answer 2

尝试在文档对象模型（“DOM”）加载后编辑元素，否则会遇到错误。

document.onload = function() { document.getElementById('wide-left').innerHTML = '<p>This is some HTML</p>'; }

如何使用JavaScript替换html元素？

2 个答案: