Home > Web Front-end > JS Tutorial > Example of using jQuery tag replacement function replaceWith()

Example of using jQuery tag replacement function replaceWith()

巴扎黑
Release: 2017-06-24 14:19:35
Original
1657 people have browsed it

This article mainly introduces the use examples of jQuery tag replacement function replaceWith(). Use replaceWith to replace tags in templates, and it can also be implemented Multi-language website, friends in need can refer to

replaceWith simple use

In jQuery, there is a powerful replacement function replaceWith(), It is very simple to use, for example:

The page has the following p tags

Replace all p tags with "##"


$('p').replaceWith('##');
Copy after login

Result after execution:

Replace tag

Using this replaceWith, we can replace all The p tag is replaced with the b tag, and the content remains unchanged:


$('p').each(function(){
    $(this).replaceWith(&#39;<b>&#39;+$(this).html()+&#39;</b>&#39;);
});
Copy after login

The result

This is the replacement!

Multi-language websites can easily use this function to complete

If you are developing a multi-language website, you can even use this feature, for example, when you need to translate Add an i tag to the text, and then traverse the translation replacement.

Suppose the page dom structure is as follows:

We need to translate the text in the i tag on the page. Those with i tags on the page are Apple ,computer. So we need a translation library:


var translate = {
    &#39;苹果&#39; : &#39;apple&#39;,
    &#39;电脑&#39; : &#39;PC&#39;
};
Copy after login

Then I can perform translation replacement like this


$(&#39;i&#39;).each(function(){
    $(this).replaceWith(translate[$(this).html()]);
});
Copy after login

The effect after execution :

Page effect:

The above is the detailed content of Example of using jQuery tag replacement function replaceWith(). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template