1. 转义换行符/模板字面量
最明显的第一个更改是修改mySpan.innerHTML部分：HTML字符串不能直接使用，因为单引号和双引号不支持未转义的换行符。您可以转义换行符或使用模板字面量来解决这个问题。
A. 转义换行符
将所有未转义的换行符更改为\n将解决此问题。虽然可能不太易读，但这种方法没有任何问题。
mySpan.innerHTML = "<div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openPerk(event, 'Relief')\" id=\"defaultOpen\">Relief</button>\n<!-- ... -->\n</div>";
注意：在字符串中也需要转义双引号，以免导致语法错误。
B. 模板字面量
使用模板字面量，反引号之间的任何换行都会被解释为转义后的换行。
mySpan.innerHTML = `<div class="tab">
<button class="tablinks" onclick="openPerk(event, 'Relief')" id="defaultOpen">Relief</button>
<!-- ... -->
</div>`;
2. HTMLCollection，而不是Element
另一个小错误是myAnchor变量是一个HTMLCollection（即使只有一个结果，getElementsByClassName也会返回一个HTMLCollection），因此它将没有parentNode属性。
将赋值表达式更改为引用HTMLCollection中的第一个元素即可解决此问题：
var myAnchor = document.getElementsByClassName("description")[0];
完整解决方案
以下代码片段借用了必要的网页元素，以展示上述更改的工作示例。
const myAnchor = document.getElementsByClassName("description")[0];
const mySpan = document.createElement("div");
mySpan.innerHTML = `<div class="tab">
<button class="tablinks" onclick="openPerk(event, 'Relief')" id="defaultOpen">Relief</button>
<button class="tablinks" onclick="openPerk(event, 'Features')">Features</button>
</div>
<div id="Relief" class="tabcontent">
<p><strong>Wake up refreshed!</strong> This patented, three-component Sleep System naturally relieves
nighttime shoulder pain so you can sleep better at night and feel better during the day.</p>
<p>Do you experience nighttime acid reflux? For patients with both shoulder pain and nighttime acid reflux, we recommend the
<strong><a href="https://medcline.com/products/medcline-reflux-relief-system">MedCline Reflux Relief System</a></strong>.</p>
</div>
<div id="Features" class="tabcontent">
<ul>
<li>Patented arm pocket for pain free sleep</li>
<li>FSA/HSA approved</li>
<li>95% of usuers report better sleep</li>
<li>Left- or right-side use</li>
</ul>
</div>`;
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
function openPerk(evt, perkName) {
let i;
const tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
const tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(perkName).style.display = "block";
evt.currentTarget.className += " active";
}
window.openPerk = openPerk;
document.getElementById("defaultOpen").click();
<div class="seven columns medium-down--one-whole omega">
<div class="sale_banner_product">Sale</div>
<h1 class="product_name">MedCline Shoulder Relief System</h1>
<div data-oke-reviews-product-listing-rating="">
<div data-oke-reviews-version="2.13.0" class="okeReviews okeReviews--theme">
<div class="okeReviews-reviewsSummary js-okeReviews-reviewsSummary is-okeReviews-clickable" data-oke-ga-click-action="Star Rating Summary Click" data-oke-ga-click-label="MedCline Shoulder Relief System" tabindex="0" role="button">
<div class="okeReviews-reviewsSummary-starRating">
<span class="okeReviews-starRating okeReviews-starRating--small">
<span class="okeReviews-a11yText">Rated 4.2 out of 5</span>
<span class="okeReviews-starRating-indicator" role="presentation">
<span class="okeReviews-starRating-indicator-layer"></span>
<span class="okeReviews-starRating-indicator-layer okeReviews-starRating-indicator-layer--foreground" style="width: 85%"></span>
</span>
</span>
</div>
<div class="okeReviews-reviewsSummary-ratingCount">
<span aria-hidden="true">364 Reviews</span>
<span class="okeReviews-a11yText">Based on 364 reviews</span>
</div>
<span class="okeReviews-a11yText">Click to go to reviews</span>
</div>
</div>
</div>
<div class="feature_divider"></div>
<div class="modal_price">
<div class="price__container price__container--display-price-false "> <span content="199.99" class="sale"> <span class="current_price"> <span class="money">$199.99</span></span>
</span> <span class="was_price"> $249.99</span> <span class="sale savings"> You Save 20% (<span class="money">$50.00</span>)</span>
</div>
<div class="sold-out__container"> <span class="sold_out"></span></div>
</div>
<div class="description">
<div class="desktop-only">
<b></b>
<table class="compare_table" id="lp_blue" style="width: 100%;">
<tbody>
<tr>
<th></th>
<th>MedCline</th>
<th>The Other Guys</th>
</tr>
<tr>
<td>Patented Arm Pocket for Pain Free Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>FSA/HSA Approved</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>95% of Users Report Better Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>Left or Right-Side Use</td>
<td>✓</td>
<td>✕</td>
</tr>
</tbody>
</table>
</div>
<dl class="faqAccordion right-for-you mobile-only">
<dt><button type="button" aria-expanded="false">How MedCline compares to the competition</button></dt>
<dd id="panel-05" aria-hidden="true">
<table style="width: 100%;" id="lp_blue" class="compare_table">
<tbody>
<tr>
<th></th>
<th>MedCline</th>
<th>The Other Guys</th>
</tr>
<tr>
<td>Patented Arm Pocket for Pain Free Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>FSA/HSA Approved</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>95% of Users Report Better Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>Left or Right-Side Use</td>
<td>✓</td>
<td>✕</td>
</tr>
</tbody>
</table>
</dd>
</dl>
</div>
<div class="clearfix product_form init smart-payment-button--false product_form--dropdown" id="product-form-4791002857607" data-product-form="" data-options-size="1" data-money-format="${{amount}}" data-shop-currency="USD" data-select-id="product-select-4791002857607"
data-enable-state="true" data-product="" data-product-id="4791002857607">
<form method="post" action="/cart/add" id="product_form_4791002857607" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"> <input type="hidden" name="id" value="33912967626887">
<div class="purchase-details">
<div class="purchase-details__quantity product-quantity-box"> <label for="quantity">Qty</label> <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span> <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1"> <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
</div>
<div class="purchase-details__buttons purchase-details__spb--false ">
<a class="bundleupgrade__trigger quick-pay-off" js-trigger-bundle="">ADD TO CART</a> <button type="button" name="add" class=" ajax-submit action_button add_to_cart " data-label="Add to Cart"> <span class="text"> Add to Cart</span> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
<path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
</svg></button>
</div>
<shopify-payment-terms variant-id="33912967626887" shopify-meta="{"variants":[{"id":33912967626887,"price":"$49.99","eligible":true}],"min_price":"$50","max_price":"$3000"}"></shopify-payment-terms>
<div class="cf-order-by-outer" style="display:none;"> Order NOW and get it by: <span class="cf-order-by-date"></span></div>
</div>
</form>
</div>
</div>
mySpan.innerHTML = "<div class="tab">也许应该用单引号包裹'tab'。 - Hanlet Escaño.innerHTML不可取。事实上，由于性能和安全问题，应该尽可能避免使用.innerHTML。相反，考虑在页面中直接添加 HTML。此外，不要使用getElementsByClassName()，而是使用.querySelectorAll()。 - Scott Marcus