JavaScript

【jQuery】Effective HTML Tag Wrapping Using wrapInner – Practical Guide

 

In this article, we will explain how to use the highly useful jQuery method wrapInner() to wrap specific HTML tags with other tags. This technique is particularly helpful when you want to highlight specific text or content on a web page or make structural changes.

Contents
  1. Introduction
  2. Preparing the CSS
  3. Preparing the HTML
  4. Implementation with JavaScript
  5. Demo Page: Wrapping Specific Tag Elements with a Specified HTML Tag
  6. Conclusion

Introduction

In the programming world, writing concise and efficient code is essential. jQuery is one of the libraries that meets this need. This article will show you how to easily wrap specific HTML elements with another element using the wrapInner() method. We will demonstrate the process using an example where elements with the class name “txt” are wrapped with a section tag.

Preparing the CSS

First, let’s prepare the CSS to visually highlight the tag elements. Here, we define styles for the body, h1, section tags, and the target class .txt. For example, the section tag is styled with a black background and white text. This styling will also be applied automatically to dynamically generated elements using JavaScript.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
section{
  width: 500px;
  margin: 0 auto;
  background-color: #000000;
  font-size: 24px;
  font-weight: bold;
}
.txt{
  color: #ffffff;
  line-height: 2em;
}
</style>

Preparing the HTML

Next, we prepare the HTML. Here, we include three div tags with the class txt. These will later be wrapped with a section tag using jQuery.

<h1>Using wrapInner to wrap pre-written class=txt tags with a section tag</h1>

<div class="txt">Text 1</div>
<div class="txt">Text 2</div>
<div class="txt">Text 3</div>

Implementation with JavaScript

Using the jQuery wrapInner() method, we dynamically wrap the specified elements with another tag. In this case, we select all elements with the class txt and wrap them with a section tag. To perform this operation, you first need to load the jQuery library (jquery-2.2.0.min.js file).

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".txt").wrapInner('<section></section>');
});
</script>

Demo Page: Wrapping Specific Tag Elements with a Specified HTML Tag

If you’d like to see this technique in action, please check out the demo page below. You can see how elements with the class txt are wrapped with a section tag.



【wrapInner】Demo Page for Wrapping Specific Tag Elements

Conclusion

In this article, we learned how to use the jQuery wrapInner() method to dynamically wrap specific HTML elements with another tag. This method is very useful for highlighting specific content on a webpage or making structural changes. We recommend writing and testing the code yourself to apply this technique to your projects.

We hope this article is helpful for your learning in programming and web design.

※ Use this content at your own discretion. Please do not reuse the Google Analytics tag in the head section.

wrapInner
RELATED POST