<p>I want to use javascript to insert some elements into the current page.
Such as this is the original document:
&lt;p&gt;Hello world!&lt;/p&gt;</p>

<p>Now I want to insert an element in to the text so that it will become:</p>

<p>&lt;p&gt;Hello &lt;span id=span1&gt;new&lt;/span&gt; world!&lt;/p&gt;</p>

<p>I need the span tag because I want to handle it later.Show or hide.
But now problem comes out, if the original page has already defined a strange CSS style on all &lt;span&gt; tags, the "new" I just inserted will not appear to be the same as "Hello" and "world". How can I avoid this? I want the "new" be exactly the same as the "Hello" and "world".</p>

Include the class definition that's defined in CSS on your JavaScript version of the
```
<span>
```
tag as well.
```
```
<span class="class_defined_in_css">
```
```
(where this
```
<span>
```
tag would be part of your JavaScript code.)