使用Javascript用更復雜的代碼動態替換HTML標簽

Question

我想知道是否有一種很好的方法來達到以下目的：我選擇了一個HTML類，並標記了某個CSS類（例如<span class="myclass">My content</span> ），並且希望瀏覽器呈現以一些奇怪的方式自定義為“我的內容”文本，例如，以這種方式：

<span class="myclass" data-image="myimage.jpg" data-title="My Title">My content</span>

我把它換成了

<h1>My Title</h2> My con<img src="myimage.jpg">en<img src="myimage.jpg">

（每個't'出現一次圖像。

我的意思是，我希望一些Javascript代碼以內部HTML和<span class="myclass">標記的屬性為參數執行； 該代碼應具有將我的HTML標記替換為一些更復雜的HTML代碼的效果，但應使其在HTML頁面中的位置完全相同。 有可能做到嗎？

對不起，我提出問題的方式很糟糕，但是我是HTML和Javascript的自言自語！

Answer 1

如果要替換HTML而不是文本內容，則始終可以使用replaceWith()函數：

var newContnet = '<h1>My Title</h2> My con<img src="myimage.jpg">en<img src="myimage.jpg">';

$( ".myClass" ).replaceWith(newContent);

這是一個超簡單的示例：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
          var newContnet = '<h1>My Title</h2> My con<img src="myimage.jpg">en<img src="myimage.jpg">';
          $(".myClass").replaceWith(newContnet);
        });
        </script>
    </head>
    <body>
        <span class="myclass" data-image="myimage.jpg" data-title="My Title">My content</span>
    </body>
</html>

使用Javascript用更復雜的代碼動態替換HTML標簽

問題描述

1 個解決方案

解決方案1
1 已采納 2013-10-12 16:18:58

使用Javascript用更復雜的代碼動態替換HTML標簽

問題描述

1 個解決方案

解決方案1 1 已采納 2013-10-12 16:18:58

解決方案1
1 已采納 2013-10-12 16:18:58