使用Javascript动态替换更复杂的代码的HTML标签 [英] Use Javascript to dynamically replace HTML tags with more complicated code
问题描述
< span class =myclass>我的内容< / span> ），我希望浏览器将其呈现为以某种奇怪的方式自定义的文本我的内容，例如以这种方式进行定制： < span class =myclassdata-image =myimage.jpgdata-title =我的标题>我的内容< / span>
我把它换成了
< h1>我的标题< / h2>我的con< img src =myimage.jpg> en< img src =myimage.jpg>
（每个't'的图像出现一次。
我的意思是，我希望一些Javascript代码可以用内部HTML和我的< span class =myclass> 标签;这段代码的效果应该是用一些更复杂的HTML代码替换我的HTML标签，但将它保留在HTML页面中的相同位置。是否可以这样做？
对不起，我提出了这个问题，但我是HTML和Javascript中的一个自动修改！
>如果您要重新使用HTML而不是文本内容，则可以始终使用 replaceWith（）函数： var newContnet ='< h1>我的标题< / h2>我的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>我的标题< / h2>我的con< img src =myimage.jpg> en< img src =myimage.jpg>';
$（。myClass）。replaceWith（newContnet）;
}）;
< / script>
< / head>
< body>
< span class =myclassdata-image =myimage.jpgdata-title =我的标题>我的内容< / span>
< / body>
< / html>
I was wondering whether there is a good way of attaining the following: I select a HTML class, marked with a certain CSS class (say <span class="myclass">My content</span>) and I want the browser to render it as the text "My content" customized in some weird ways, for instance in this way: I write
<span class="myclass" data-image="myimage.jpg" data-title="My Title">My content</span>
and I get it replaced with
<h1>My Title</h2> My con<img src="myimage.jpg">en<img src="myimage.jpg">
(one occurrence of the image for each 't'.
I mean, I would like some Javascript code to be executed with arguments the inner HTML and the attributes of my <span class="myclass"> tags; this code should have the effect of replacing my HTML tag with some more complicated HTML code, but keeping it in exactly the same position in the HTML page. Is it possible to do it?
Sorry for my awful way of posing the question, but I am an autodidact in HTML and Javascript!
If you want to repalce the HTML rather than the text content, you can always use the replaceWith() function:
var newContnet = '<h1>My Title</h2> My con<img src="myimage.jpg">en<img src="myimage.jpg">';
$( ".myClass" ).replaceWith(newContent);
And here is a super-simple example:
<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标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
