从<p>获取所有<em>并将其输出为标记

Question

例如，我有一个<p>标记，其中包含一些<em>的句子，如下所示

    <p>There's <em>a</em> script that he's 
     written that is <em>a</em> really cool Batman idea.</p>

我使用一些javascript将类添加到所有em元素

 $("em").addClass("Keyword-Result");

现在我想知道如何打印出所有<em class="Keyword-Result")个标签？

Answer 1

但是没有必要在这里动态添加类，但这里是一个片段，它还将标签附加到#tags：

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


<p>There's <em>a</em> script that he's 
     written that is <em>a</em> really cool Batman idea.</p>

<div id="tags"></div>

    <style>
   em.Keyword-Result {
    background-color: grey;
    padding: 4px;
    border-radius: 2px;
     margin:2px;
     color:#fff;
    }
    </style>

    <script>
    $(document).ready(function(){
    
  $("em").clone().addClass("Keyword-Result").appendTo('#tags');
   
     });

    </script>

Answer 2

简单方法：

console.log($("em.Keyword-Result"));

但你不想在控制台中打印它而是在屏幕上打印？然后你不需要打印它们（它们已经存在），但使用css格式化它们。

<style>
em.Keyword-Result {
    background-color: lightgrey;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 3px;
}
</style>

请参阅https://jsfiddle.net/d2xrrukh/

或者，如果你想将em复制到一个单独的div而不需要循环：

https://jsfiddle.net/d2xrrukh/3/