使用 jQuery 插入复杂的 HTML?

Question

有没有办法用jQuery插入这样的HTML：

<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry.<span style="color:red; font-size: 1.6rem;">*</span> <p>

我尝试这样做，但它只能在没有<a>和<span>的情况下工作，但在控制台中返回未捕获的语法错误：意外的令牌<</strong>

jQuery("div#webform-component-consent > .description").html(<p>Lorem Ipsum is 
<a href="somewhere">simply dummy</a> 
text of the printing and typesetting industry.
<span style="color:red; font-size: 1.6rem;">*</span>
</p>);

我也尝试使用.append((，但结果是一样的。你认为这是可能的吗，怎么做？

Answer 1

只需删除换行符并将其放在引号内即可。

jQuery("div#webform-component-consent > .description").html('<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry. <span style="color:red; font-size: 1.6rem;">*</span></p>');

<div id="webform-component-consent">
<div class="description"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您可以在 ' 即模板文字之间使用字符串，以便您可以在字符串中使用多行字符串和" (双引号(。

jQuery("div#webform-component-consent > .description").html(`<p>Lorem Ipsum is 
<a href="somewhere">simply dummy</a> 
text of the printing and typesetting industry.
<span style="color:red; font-size: 1.6rem;">*</span>
</p>`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="webform-component-consent">
<div class="description">
</div>
</div>

Answer 3

在双引号前使用 InnerHTML 和 "\"：

document.getElementsByClassName("analyseButtonImage")[i].innerHTML = "<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry.<span style="color:red; font-size: 1.6rem;">*</span> <p>";

Answer 4

考虑一下;

var htmlString = `<p>Lorem Ipsum is <a href="somewhere">simply dummy</a> text of the printing and typesetting industry.<span style="color:red; font-size: 1.6rem;">*</span> <p>
`;
// you can choose your element, for sake of example we are using P tag;
$("p").append(htmlString);