javascript - HTML 标题没有并排显示？

Question

我试图显示两个标题，但它们没有显示。我单独测试了它们，它们可以工作，但组合起来就不起作用。

$("html").html("<h1 style='position:absolute;left:20%;color:green;'>test1</h1>"); // load1

$("html").html("<h2 style='position:absolute;left:60%;color:green;'>test2</h2>"); // load2

Answer 1

这是因为您第二次使用 html() 覆盖了第一个 header 。在第二种情况下使用 append():

$("html").html("<h1 style='position:absolute;left:20%;color:green;'>test1</h1>"); 
$("html").append("<h2 style='position:absolute;left:60%;color:green;'>test2</h2>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者将新的 header 添加到旧的 html 中:

$("html").html("<h1 style='position:absolute;left:20%;color:green;'>test1</h1>"); 
$("html").html($("html").html()+"<h2 style='position:absolute;left:60%;color:green;'>test2</h2>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>