Question

我有以下HTML：

<h1 id="site-title" class="page-title"> Website Name </h1>

我想在其下添加以下direclty，但我无法在HTML中执行此操作，因此我需要使用javascript / jquery。

<p id="site-tagline" class="site-subtitle">Tagline, Tagline, Tagline</p>

我最好怎么做？

我有这个，但渲染页面上没有任何内容。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script> $("<h1>Fashion</h1>").insertAfter("#site-title"); </script>

Answer 1

这是有效的，请查看JSFiddle。

   $("<h1>Fashion</h1>").insertAfter("#site-title");

它不适合你吗？你需要检查jQuery错误。

Answer 2

After

$("h1").after('<p id="site-tagline" class="site-subtitle">Tagline, Tagline, Tagline</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="site-title" class="page-title"> Website Name </h1>

Answer 3

使用追加命令

添加标语

$(document).ready(function(){
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 1 </h1>' );

$( "#site-tagline" ).append( ',' );
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 2 </h1>' );

$( "#site-tagline" ).append( ',' );
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 3 </h1>' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="site-tagline" class="site-subtitle"></p>

如何使用javascript / jquery在元素下添加HTML？

3 个答案: