Question

我想知道是否有一种很好的方法来实现以下目标：我选择一个标有某个CSS类的HTML类（比如<span class="myclass">My content</span>），我希望浏览器将其呈现为文本＆＃ 34;我的内容＆＃34;以某种奇怪的方式定制，例如以这种方式：我写

<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">

（每个图像出现一次＆＃39; t＆＃39;。

我的意思是，我想要使用内部HTML和我的<span class="myclass">标签的属性参数执行一些Javascript代码;这段代码应该具有用一些更复杂的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 个答案: